如何将全日历事件限制为仅一天？

Question

是否可以限制 FullCalendar，以便在创建事件拖动时，该事件不会跨越其他日期？

我的意思是：如果我在 3 月 20 日 09:00 开始选择，我希望用户无法选择在 3 月 21 日 13:00 结束的事件。

Answer 1

您可以将 eventConstraint 添加到日历设置中。

eventConstraint:{
          start: '00:00', // a start time (start of the day in this example)
          end: '24:00', // an end time (end of the day in this example)
        }, 

你可以在这个plunker中重现它。

如果您只想在拖动过程中限制它，我认为您只能使用

eventDrop 回调 来做到这一点。如果 moment.startOf('day) 不同，您可以使用 revertFunc 将拖放移动恢复到之前的状态。

类似：

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event, delta, revertFunc) {

        if (!event.start.startOf('day').isSame(event.end.startOf('day'))) {
             revertFunc();
        }
    }
});

Answer 2

轻松将此片段添加到日历参数中：

eventOverlap: function(stillEvent, movingEvent) {
     return false;
}

Answer 3

$('#calendar').fullCalendar({
events: [
    {
        title  : 'event1',
        start  : '2010-01-01'
    },
    {
        title  : 'event2',
        start  : '2010-01-09T09:30:00',
        end    : '2010-01-09T15:30:00',
    },
    {
        title  : 'event3',
        start  : '2010-01-09T12:30:00',
        allDay : false // will make the time show
    }
]

});