30

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

4

11 回答 11

19

我做了一个函数来检查给定事件是否与其他事件重叠。如果事件与其他事件重叠，则返回 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;
}

您可以在删除或调整事件大小时使用它，如果事件与其他事件重叠，请使用在 eventDrop 和 eventResize 回调中接收到的 revertFunc 或取消在 select 回调中创建事件。为了在选择回调中使用它，创建一个虚拟事件：

var event = new Object();
event.start = start;
event.end = end;
于 2012-01-09T23:45:59.773 回答
14

从 2.20 版开始，默认情况下已包含此更改...

利用

事件重叠：假

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

于 2015-01-01T13:19:56.263 回答
9

与埃克鲁兹的答案相同，但逻辑对我来说效果更好。

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;
}
于 2013-03-11T10:31:22.443 回答
2

只需添加

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
于 2017-05-28T15:31:50.553 回答
1

与 Matthew Webb 相同，但 Follow 对我有用，因为有时当我将事件从 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;
}
于 2014-01-21T14:55:26.473 回答
0

我正在使用 2.11 版的 Fullcalendar，并对 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();
                        }
        },
        ...
    });
于 2014-09-05T17:38:51.533 回答
0 
    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();
            }
        }
    },
于 2013-07-12T19:17:35.367 回答
0

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

eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.allDay && movingEvent.allDay;
    }
于 2017-01-11T22:14:09.327 回答
-1

请这样写。

$('#calendar').fullCalendar({
    selectOverlap: false,
    eventOverlap:false,
})

SelectOverlap 在我们创建事件重叠时防止重叠。

当我们拖放事件重叠时，EventOverlap 防止重叠。

于 2021-02-11T15:58:32.303 回答
-2

尝试这个：

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

根据文档。

于 2013-11-19T10:04:16.270 回答
-3

allowCalEventOverlap：[布尔值| 默认值：false] – 日历是否允许事件重叠。如果事件被拖动或调整到与另一个日历事件重叠的位置，则会在必要时移动或调整其大小。

那是你要找的吗？

于 2010-03-03T08:33:58.257 回答