Avoid event superposition in FullCalendar

Question

Hello I'm trying to avoid overlapping events in a FullCalendar app. I've defined the eventDrop callback so it checks for any overlapping events, and moves the currently moved event to the end of the overlapping one by changing event.start and event.end accordingly, and then calling .fullCalendar('updateEvent', event) .

This here is my code, the moment call is for http://momentjs.com/docs/ which is a time handling facility library for javascript and I don't think is culplrit of the problem. If I comment up the lines that do event.start = start; event.end = end event.start = start; event.end = end , then all works normally. If I don't, it breaks in exactly the same fashion, whether I call updateEvent or not. What happens is: the event DOES get moved to the end of the previous one, but if I try to move the event forwards later on (on to an empty space later that day) the previous event gets visually extended until the new beginning of the event currently being modified.

self.collection is a backbone collection, so calling this code with just the event.start= bit commented shows the events overlapping, but if I refresh the page, then the events show in their right spots (not overlapping)

eventDrop: function(event, dayDelta,
                    minuteDelta, allDay,
                    revertFunc, jsEvent, ui, view) {
    var start = moment(event.start);
    var end = moment(event.end);
    var overlap = self.calendar.fullCalendar('clientEvents', function(ev) {
        if( ev == event)
            return false;
        var estart = moment(ev.start);
        var eend = moment(ev.end);
        return estart.unix() < end.unix() && eend.unix() > start.unix();
    });
    if( overlap.length ) {
        overlap = overlap[0];
        var estart = moment(overlap.start);
        var eend = moment(overlap.end);
        var duration = eend - estart;
        start = eend;
        end = start.clone();
        end.add(duration);
        event.start = start.toDate();
        event.end = end.toDate();
        self.calendar.fullCalendar('updateEvent', event);
    }
    event.model.save({start: start.unix(), end: end.unix()});
},

Answer 1

OK, found the issue.

the line that says

start = eend;

should be

start = eend.clone();

because wrapping it in a moment object doesn't do it, it just keeps a reference, and it sets the newly moved event's start date to be the same Date object as the overlap.end

Answer 2

you have another mistake, duration should be

var duration = end - start;

because in your approach it calculates the duration of the overlapping event, not the one that you just moved