Question

我希望在我的Fullcalendar上有一个datepicker范围。我已经看过一些帖子，你可以用日期选择器选择日期，但我希望用户能够选择开始和结束日期。

我的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

好的，所以这里有适合你的工作。但首先，关于你的问题的一些注释：

如果你想用prompt做到这一点，你需要有三个prompts（一个用于标题，另一个用于开头，另一个用于结尾）。而且你现在应该不容易定制提示。
您应该选择使用

现在，解释下面的代码：

我使用Bootstrap Modal向用户请求数据
我使用Bootstrap Eonasdan Datetimepicker，没有选项（您应该根据需要自定义）
想法是当用户选择日期时打开模态，填入数据，点击＆＃34;保存＆＃34;按钮，将事件添加到fullcalendar，清除模态字段并关闭对话框。

首先，您需要记下模态的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');
    });
});

这对你来说是一个开始。你应该做很多事情来改善这一点。请注意，当您编辑一个事件时，这将创建一个新事件，但我让您想出来。

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

Fullcalendar与日期范围选择器

1 个答案: