Is there a way to prevent overlapping events in jQuery FullCalendar?
eventRender is a great way to attach effects to event elements, such as a Tooltip. js tooltip effect: var calendar = new Calendar(calendarEl, { events: [ { title: 'My Event', start: '2010-01-01', description: 'This is a cool event' } // more events here ], eventRender: function(info) { var tooltip = new Tooltip(info.
Calendar::getEvents Retrieves events that FullCalendar has in memory. This method will return an array of Event Objects that FullCalendar has stored in client-side memory.
FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.
FullCalendar is a JavaScript library that seamlessly integrates with such popular JavaScript frameworks as Vue, React, Angular. Thanks to its excellent documentation, one won't have trouble incorporating the library into projects.
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;
As of version 2.20 this change has been incorporated by default...
use
eventOverlap: false
http://fullcalendar.io/docs/event_ui/eventOverlap/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With