Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to prevent overlapping events in jQuery FullCalendar?

Is there a way to prevent overlapping events in jQuery FullCalendar?

like image 214
user267637 Avatar asked Mar 03 '10 08:03

user267637


People also ask

What is FullCalendar eventRender?

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.

How do I get events on FullCalendar?

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.

What is the use of FullCalendar?

FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.

What is FullCalendar?

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.


2 Answers

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;
like image 136
ecruz Avatar answered Oct 22 '22 20:10

ecruz


As of version 2.20 this change has been incorporated by default...

use

eventOverlap: false

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

like image 14
inN0Cent Avatar answered Oct 22 '22 19:10

inN0Cent