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

Is开发者_C百科 there a way to prevent overlapping events in jQuery FullCalendar?

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/

Same as ecruz's answer but with logic that worked better for me.

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

use this

  eventOverlap: false, // when load event
  selectOverlap: false,  // when create event from calender

for reference :

https://fullcalendar.io/docs/eventOverlap

https://fullcalendar.io/docs/selectOverlap

Just add

eventOverlap: false

as one of your options outside of the events element.

You can also add the option

overlap

to a single event, which will override the eventOverlap on that single event.

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

Same as Matthew Webb but Following worked for me since sometimes my end date was null when i was dragging the event from allDay to some time slot

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

    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();
            }
        }
    },

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();
                        }
        },
        ...
    });

Please write like this.

$('#calendar').fullCalendar({
    selectOverlap: false,
    eventOverlap:false,
})

SelectOverlap prevent overlap when we create an event overlapping.

EventOverlap prevent overlap when we drag drop an event overlapping.

Try this:

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

As per the documentation.

allowCalEventOverlap: [boolean | default: false] – Whether the calendar will allow events to overlap. Events will be moved or resized if necessary if they are dragged or resized to a location that overlaps another calendar event.

is that what you were looking for?