Question

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

干杯

史蒂夫

Answer 1

至少有两个选项，具体取决于您希望用户创建活动的方式。

用户只需拖放即可创建活动

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

用户根据表单创建活动（表单始终存在或拖放后显示）

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

基本过程是：

在用户选择时间段后显示模式。使用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 中查看完整的示例。你应该注意：

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

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

1 个答案: