Is there a way to prevent overlapping events in jQuery FullCalendar?
just try this, works fine for me.... https://fullcalendar.io/docs/event_ui/eventOverlap/
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
}
I'm using version 2.11 of Fullcalendar and i made some change to code posted by 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;
}
and this is how i use to prevent the overlap:
$('#calendar').fullCalendar({
...
eventDrop: function(event, delta, revertFunc) {
if (isOverlapping(event)) {
revertFunc();
}
},
...
});
I made a function that checks whether the given event is overlapping other or not. Returns true if the event is overlapping other and false otherwise.
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;
}
You can use it when dropping or resizing and event and if the event overlaps other use the revertFunc that is received in the eventDrop and eventResize callbacks or cancel the creation of an event in the select callback. In order to use it in the select callback create a dummie event:
var event = new Object();
event.start = start;
event.end = end;
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();
}
}
},