Есть ли способ предотвратить перекрывающиеся события в jQuery FullCalendar?

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;
}

Вы можете использовать его при отбрасывании или изменении размера и события, и если событие перекрывает другое, используйте revertFunc, полученный в обратных вызовах eventDrop и eventResize, или отмените создание события в обратном вызове select. Чтобы использовать его в обратном вызове select, создайте событие-пустышку:

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

как один из вариантов вне элемента событий.

Вы также можете добавить опцию

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

То же самое, что и Мэтью Уэбб, но у меня сработала «Последующая», потому что иногда моя дата окончания была нулевой, когда я перетаскивал событие из 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

просто попробуй это, у меня нормально работает .... https://fullcalendar.io/docs/event_ui/eventOverlap/

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

Answer 7

Я использую версию 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();
                        }
        },
        ...
    });

Answer 8

Попробуйте это:

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

Согласно документации .

Answer 9

    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 10

allowCalEventOverlap: [логический | default: false] - разрешит ли календарь перекрывать события. События будут перемещаться или изменяться при необходимости, если они перетаскиваются или изменяются в положение, которое перекрывает другое событие календаря.

это то, что вы искали?