有没有办法防止jQuery FullCalendar中的重叠事件？

有没有办法防止jQuery FullCalendar中的重叠事件？

Answer 1

我做了一个函数来检查给定事件是否与其他事件重叠。 如果事件与其他事件重叠，则返回true，否则返回false。

function isOverlapping(event){ var array = calendar.fullCalendar('clientEvents'); for(i in array){ if(array[i].id != event.id){ if(!(Date(array[i].start) >= Date(event.end) || Date(array[i].end) <= Date(event.start))){ return true; } } } return false; } 

您可以在删除或resize和事件时使用它，如果事件与其他事件重叠，则使用eventDrop和eventResize回调中接收的revertFunc，或取消在select回调中创建事件。 为了在select回调中使用它，创建一个dummie事件：

 var event = new Object(); event.start = start; event.end = end; 

Answer 2

自版本2.20起，此更改已默认合并…

使用

eventOverlap：false

http://fullcalendar.io/docs/event_ui/eventOverlap/

Answer 3

与ecruz的答案相同，但逻辑对我来说效果更好。

 function isOverlapping(event){ // "calendar" on line below should ref the element on which fc has been called var array = calendar.fullCalendar('clientEvents'); for(i in array){ if (event.end >= array[i].start && event.start <= array[i].end){ return true; } } return false; } 

Answer 4

和Matthew Webb一样但是以下为我工作，因为有时我的结束日期是null，因为我将事件从allDay拖到某个时间段

 function isOverlapping(event) { var arrCalEvents = $('#' + g_str_FullCalenderID).fullCalendar('clientEvents'); for (i in arrCalEvents) { if (arrCalEvents[i].id != event.id) { if ((event.end >= arrCalEvents[i].start && event.start <= arrCalEvents[i].end) || (event.end == null && (event.start >= arrCalEvents[i].start && event.start <= arrCalEvents[i].end))) {//!(Date(arrCalEvents[i].start) >= Date(event.end) || Date(arrCalEvents[i].end) <= Date(event.start)) return true; } } } return false; } 

Answer 5

只需添加

 eventOverlap: false 

作为events元素之外的选项之一。

您也可以添加该选项

 overlap 

单个事件，它将覆盖该单个事件的eventOverlap。

 events: [ { title : 'event1', start : '2017-05-27' }, { title : 'event2', start : '2017-05-28', end : '2017-05-29' }, { title : 'event3', start : '2017-05-30T12:30:00', allDay : false, // will make the time show draggable: true, editable: true, overlap: true, }, { title : 'event3', start : '2017-05-30T09:30:00', allDay : false, // will make the time show draggable: true, editable: true, } ], eventOverlap: false 

Answer 6

  eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { var start = new Date(event.start); var end = new Date(event.end); var events = event.source.events; for (var i = 0; i < events.length; i++) { var someEvent = events[i]; if (someEvent._id == event._id) { continue; } var seStart = new Date(someEvent.start); var seEnd = new Date(someEvent.end); if ((start < seEnd) && (seStart < end)) {// dates overlap revertFunc(); } } }, 

Answer 7

试试这个，对我来说很好…. https://fullcalendar.io/docs/event_ui/eventOverlap/

 eventOverlap: function(stillEvent, movingEvent) { return stillEvent.allDay && movingEvent.allDay; } 

Answer 8

我正在使用Fullcalendar的2.11版本，我对ecruz发布的代码进行了一些更改：

 function isOverlapping(event){ var array = calendar.fullCalendar('clientEvents'); for(i in array){ if(array[i]._id != event._id){ if(!(array[i].start.format() >= event.end.format() || array[i].end.format() <= event.start.format())){ return true; } } } return false; } 

这就是我用来防止重叠的方法：

  $('#calendar').fullCalendar({ ... eventDrop: function(event, delta, revertFunc) { if (isOverlapping(event)) { revertFunc(); } }, ... }); 

Answer 9

allowCalEventOverlap：[boolean | default：false] – 日历是否允许事件重叠。 如果将事件拖动或resize到与其他日历事件重叠的位置，则会根据需要移动或调整事件大小。

那是你在找什么？

Answer 10

试试这个：

$('#calendar').fullCalendar({slotEventOverlap : false});

根据文档 。