带日期范围选择器的全日历

Question

我想在我的Fullcalendar上设置日期选择器范围。 我看过一些帖子，您可以使用日期选择器选择日期，但是我希望用户能够选择开始日期和结束日期。

我的全日历看起来像下图，我想在红色方块上添加日期选择器。

这是我正在使用的代码。 如何/在哪里添加日期选择器？

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2016-09-12',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },
            eventClick: function(event, element) {
                event.title = prompt('Event Title:',event.title );
                $('#calendar').fullCalendar('updateEvent', event);
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });

        $('#datepicker').datepicker({
            inline: true,
            onSelect: function(dateText, inst) {
                var d = new Date(dateText);
                $('#fullcalendar').fullCalendar('gotoDate', d);
            }
        }); 
    });
</script>

<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <div id='calendar'></div>
    <div id='datepicker'></div>
</body>

Answer 1

好的，这就是您的工作。 但首先，请注意您的问题：

1. 如果要使用prompt进行操作，则需要三个prompts （一个prompts标题，另一个prompts开始，另一个prompts结束）。 现在您应该不容易自定义提示。
2. 您应该已经选择了一个日期选择器库来使用

现在，说明以下代码：

1. 我正在使用Bootstrap Modal向用户请求数据
2. 我正在使用Bootstrap Eonasdan Datetimepicker ，没有任何选项（您应该根据需要自定义此选项）
3. 想法是当用户选择一个日期时打开模式，填写数据，单击“保存”按钮，将事件添加到全日历，清除模式的字段并关闭对话框。

首先，您需要写下模式的HTML，例如

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Create new event</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="title">Event title</label>
                        <input type="text" name="title" id="title" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="starts-at">Starts at</label>
                        <input type="text" name="starts_at" id="starts-at" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="ends-at">Ends at</label>
                        <input type="text" name="ends_at" id="ends-at" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save-event">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

您的javascript应该更新为：

$(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-09-12',
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
            // Display the modal.
            // You could fill in the start and end fields based on the parameters
            $('.modal').modal('show');

        },
        eventClick: function(event, element) {
            // Display the modal and set the values to the event values.
            $('.modal').modal('show');
            $('.modal').find('#title').val(event.title);
            $('.modal').find('#starts-at').val(event.start);
            $('.modal').find('#ends-at').val(event.end);

        },
        editable: true,
        eventLimit: true // allow "more" link when too many events

    });

    // Bind the dates to datetimepicker.
    // You should pass the options you need
    $("#starts-at, #ends-at").datetimepicker();

    // Whenever the user clicks on the "save" button om the dialog 
    $('#save-event').on('click', function() {
        var title = $('#title').val();
        if (title) {
            var eventData = {
                title: title,
                start: $('#starts-at').val(),
                end: $('#ends-at').val()
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
        }
        $('#calendar').fullCalendar('unselect');

        // Clear modal inputs
        $('.modal').find('input').val('');

        // hide modal
        $('.modal').modal('hide');
    });
});

这是您的起点。 您需要做很多改进。 请注意，在编辑事件时，这将创建一个新事件，但我让您自己弄清楚。

为了方便起见，我创建了一个jsfiddle ，您可以在其中查看此工作以及所使用的依赖项。