Can I prevent events with conflict time?

Question

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

Possible duplicate of [Is there a way to prevent overlapping events in jQuery FullCalendar?](http://stackoverflow.com/questions/2369683/is-there-a-way-to-prevent-overlapping-events-in-jquery-fullcalendar) — Pierre de LESPINAY, Dec 12 '15 at 08:49

score 12 · Accepted Answer · edited Feb 27 '14 at 17:38

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

Awesome, any suggestions on how I could adapt this to work on dayClick? — David Sigley, Jul 08 '14 at 09:29

score 2 · Answer 2 · answered Dec 01 '15 at 08:31

2

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

answered Dec 01 '15 at 08:31

anakin59490

630
1
11
28

This only works for the v2 fullcalendar, whereas it looks like the other two work with v1 as well as v2. – mooreds Apr 05 '16 at 19:23

Alexey Muravyov · Answer 3 · 2015-09-04T12:17:31.247

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

score 1 · Answer 4 · answered Jan 03 '17 at 11:26

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.

score 1 · Answer 5 · answered Aug 14 '19 at 12:20

1

This does the trick. It also handles resizing overlapping events

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

answered Aug 14 '19 at 12:20

Martin Wickman

19,662
12
82
106

Can I prevent events with conflict time?

5 Answers5

Linked