Question

有没有办法防止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;
}

您可以在删除或调整大小和事件时使用它，如果事件与其他事件重叠，则使用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

添加

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 5

与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 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

我正在使用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 8

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

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

Answer 9

请这样写。

// external-facing function
function acceptResource<P extends string, A extends P>(resource: ConstrainedResource<P, A>) {
  processResource(resource); // works
}

// internal-only function
function processResource(resource: Resource) {
  // assume this has already been validated
  const activePage = resource.pages
    .find(v => v.id === resource.activePage)!; // use non-null assertion (!), assume validated

}

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

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

Answer 10

试试这个：

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

根据documentation。

Answer 11

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

是你在找什么？

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

11 个答案: