web-dev-qa-db-fra.com

Existe-t-il un moyen d'éviter le chevauchement des événements dans jQuery FullCalendar?

Existe-t-il un moyen d'éviter le chevauchement des événements dans jQuery FullCalendar?

jqueryfullcalendar
31
user267637

J'ai créé une fonction qui vérifie si l'événement donné se chevauche ou non. Renvoie true si l'événement chevauche l'autre et false sinon.

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

Vous pouvez l'utiliser lors de la suppression ou du redimensionnement et d'un événement. Si l'événement se chevauche, utilisez le revertFunc reçu dans les rappels eventDrop et eventResize ou annulez la création d'un événement dans le rappel sélectionné. Pour pouvoir l'utiliser dans le rappel sélectionné, créez un événement factice:

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

A partir de la version 2.20, cette modification a été intégrée par défaut ...

utilisation 

eventOverlap: false

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

13
inN0Cent

Identique à la réponse de ecruz mais avec une logique qui a mieux fonctionné pour moi.

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

Il suffit d'ajouter 

eventOverlap: false

comme une de vos options en dehors de l'élément events.

Vous pouvez également ajouter l'option

overlap

à un seul événement, qui remplacera eventOverlap sur cet événement unique.

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

Identique à Matthew Webb mais la suite a fonctionné pour moi car parfois ma date de fin était nulle lorsque je traînais l'événement de tous les jours vers une certaine plage horaire

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

J'utilise la version 2.11 de Fullcalendar et j'ai apporté quelques modifications au code envoyé par 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;
}

et voici comment j'utilise pour éviter le chevauchement:

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

essayez ceci, ça fonctionne très bien pour moi .... 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