fullcalendar 允许用户在创建事件时添加结束时间

Question

是否可以让用户输入或选择事件的开始和结束时间。目前它似乎默认为 1 小时，但我希望用户能够定义 10 分钟或更长时间的事件？

干杯

史蒂夫

Answer 1

至少有两个选项，具体取决于您希望用户如何创建事件。

1. 用户只需拖放即可创建事件

利用snapDuration，让用户可以选择10分钟的时间段。检查this fiddle。

1. 用户基于表单创建事件（表单始终存在或拖放后显示）

我的解决方案在用户选择时间段后显示的模式对话框中使用表单。但是，您可以简单地完全删除模式对话框并始终显示表单。

基本流程是：

• 在用户选择时间段后显示模式。使用select 来完成此操作。
• 在我们显示对话框之前，请根据用户选择的内容设置事件开始值和事件结束值。
• 显示模式对话框。
• 绑定表单的submit事件，以便在表单提交时执行ajax调用。此 ajax 调用会将事件保存到数据库中，并在成功保存后关闭对话框并刷新日历。

你的函数会是这样的：

select: function( start, end, jsEvent, view ) {
    $('#event-modal').find('input[name=evtStart]').val(
        start.format('YYYY-MM-DD HH:mm:ss')
    );
    $('#event-modal').find('input[name=evtEnd]').val(
        end.format('YYYY-MM-DD HH:mm:ss')
    );

    $('#event-modal').modal('show');

    $("#event-modal").find('form').on('submit', function() {
        $.ajax({
            url: 'events/save',
            data: $("#event-modal").serialize(),
            type: 'post',
            dataType: 'json',
            success: function(response) {
                // if saved, close modal
                $("#event-modal").modal('hide');

                // refetch event source, so event will be showen in calendar
                $("#calendar").fullCalendar( 'refetchEvents' );
            }
        });
    });
},

您可以在 this JsFiddle 中查看完整示例。你应该注意：

1. 您可以在开始和结束输入中应用 DateTimePicker 插件（例如 this 或 this 或您可以在 Google 上找到的任何其他内容）
2. 您需要调整 $.ajax 调用以提供正确的 URL 并将事件保存在数据库中。
3. 我没有对此进行 100% 测试，这是为了让您走上正轨。这意味着您可能必须调整代码以满足您的需求。