web-dev-qa-db-ja.com

jQuery FullCalendarでイベントの重複を防ぐ方法はありますか？

JQuery FullCalendarでイベントの重複を防ぐ方法はありますか？

jqueryfullcalendar
30
user267637

与えられたイベントが他のイベントと重なっているかどうかをチェックする関数を作りました。イベントが他とオーバーラップしている場合は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;
17
ecruz

バージョン2.20以降、この変更はデフォルトで組み込まれています...

使用する

eventOverlap：false

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

13
inN0Cent

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;
}
8
Matthew Webb

追加するだけ

eventOverlap: false

イベント要素外のオプションの1つとして。

オプションを追加することもできます

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
2
PrestonDocks

マシューウェッブと同じですが、イベントをallDayからタイムスロットにドラッグしているときに終了日がnullになることがあったので、フォローはうまくいきました

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;
}
1
Div Tiwari

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();
                        }
        },
        ...
    });
0
Luís Ponciano

これを試してみてください、私にとってはうまくいきます... https://fullcalendar.io/docs/event_ui/eventOverlap/

eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.allDay && movingEvent.allDay;
    }
0
Leo Barbas
    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();
            }
        }
    },
0
SuperUser