Gibt es eine Möglichkeit, überlappende Ereignisse in jQuery FullCalendar zu verhindern?

Question

Gibt es eine Möglichkeit, überlappende Ereignisse in jQuery FullCalendar zu verhindern?

Answer 1

allowCalEventOverlap: [boolean | Standardwert: false] - Gibt an, ob der Kalender Ereignisse überlappt. Ereignisse werden bei Bedarf verschoben oder in der Größe geändert, wenn sie an einen Ort gezogen oder deren Größe geändert wird, der ein anderes Kalenderereignis überlappt.

ist das wonach Sie gesucht haben?

Answer 2

Ich habe eine Funktion gemacht, die überprüft, ob das gegebene Ereignis andere überlappt oder nicht. Gibt "true" zurück, wenn das Ereignis sich überlagert, andernfalls "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; 
} 

Sie können es beim Löschen oder Ändern der Größe und Ereignis und wenn das Ereignis überlappt andere Verwendung der revertFunc, die in den eventDrop und eventResize Rückrufe oder brechen Sie die Erstellung eines Ereignisses in der Auswahl Rückruf empfangen wird. Um es in der Auswahl Rückruf zu verwenden, um ein dummie Ereignis erstellen:

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

Answer 3

Gleiche wie ecruz Antwort aber mit Logik, die besser für mich gearbeitet.

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

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 5

Try this:

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

Gemäß der documentation.

Answer 6

Gleiche wie Matthew Webb aber da manchmal für mich gearbeitet nach meiner Enddatum war null, als ich bis zu einem gewissen Zeitfenster das Ereignis aus Allday ziehen

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 7

Ich bin mit Version 2.11 von Fullcalendar und ich gemacht einige Änderung Code von ecruz posted:

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

und das ist, wie ich die Überlappung zu verhindern verwenden:

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

Answer 8

Ab Version 2.20 diese Änderung durch Standard ...

eingebaut wurde

Verwendung

eventOverlap: false

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

Answer 9

nur diese versuchen, funktioniert gut für mich. ... https://fullcalendar.io/docs/event_ui/eventOverlap/

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

Answer 10

Gerade

eventOverlap: false 

als eine Ihrer Optionen außerhalb des Events Element hinzufügen.

Sie können auch die Option hinzufügen

overlap 

auf ein einziges Ereignis, das die eventOverlap auf diesem einzelnen Fall wird außer Kraft setzen.

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