Can I prevent events with conflict time?

Question

How can I prevent events with conflict time? Is there any variable to set up?

Answer 1

This does the trick. It also handles resizing overlapping events

var calendar = new Calendar(calendarEl, {
      selectOverlap: false,
      eventOverlap: false
  }
});

Answer 2

you can add eventOverlap : false in the celendar config, http://fullcalendar.io/docs/event_ui/eventOverlap/

Answer 3

No, there is not a variable to set, but you can use something like clientEvents which retrieves events that fullcalendar has in memory. You can use the function below in the eventDrop. In the case below it uses a function to filter out whether the event will have have an overlap or not.

function checkOverlap(event) {  

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

    var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
        if( ev == event)
            return false;
        var estart = new Date(ev.start);
        var eend = new Date(ev.end);

        return (Math.round(estart)/1000 < Math.round(end)/1000 && Math.round(eend) > Math.round(start));
    });

    if (overlap.length){  
            //either move this event to available timeslot or remove it
       }                  
  }

Answer 4

Correct overlap checking.

        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
            /// deny overlap of event
            var start = new Date(event.start);
            var end = new Date(event.end);

            var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
                if( ev == event) {
                    return false;
                }
                var estart = new Date(ev.start);
                var eend = new Date(ev.end);

                return (
                    ( Math.round(start) > Math.round(estart) && Math.round(start) < Math.round(eend) )
                    ||
                    ( Math.round(end) > Math.round(estart) && Math.round(end) < Math.round(eend) )
                    ||
                    ( Math.round(start) < Math.round(estart) && Math.round(end) > Math.round(eend) )
                );
            });
            if (overlap.length){
                revertFunc();
                return false;
            }
        }

Answer 5

Add custom property in the event object overlap:false for example your event object will be

                 `{
                    title:'Event',
                    start: '2017-01-04T16:30:00',
                    end: '2017-01-04T16:40:00',
                    overlap:false
                  }`

Now override selectOverlap function,

selectOverlap: function(event) {
    if(event.ranges && event.ranges.length >0) {
      return (event.ranges.filter(function(range){
          return (event.start.isBefore(range.end) &&
                  event.end.isAfter(range.start));
      }).length)>0;
    }
    else {
      return !!event && event.overlap;
    }
  },

It will not let the another event to override the already placed event.