Fullcalendar 在拖放时复制事件

Question

My fullcalendar duplicates events visually when i drag them to another timeslot. I have simplified my code down to the eventDrop to isolate the issue and yet I'm unable to understand the issue. If I store the events to my localStorage I don't get a duplicate in the storage and the duplicate disappears when I reload the page. This means the problem is only visual and with Full Calendar itself. However, this is obviously a huge issue as I don't want to reload the page: I want to stay in the current view changing what I need.

Here's my code for the eventDrop:

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
            if (!confirm("Are you sure you want to change " + event.title + " ?")) {
                    /*If the user cancels the change, the event returns to its original position. Otherwise it saves the event.*/

                    revertFunc();       /*Revert changes using the predefined function revertFunc of fullCalendar.*/

                    $("#calendar").fullCalendar("refetchEvents");
                    /*FullCalendar Method to refetch events from all sources and rerender them on the screen.*/

                } else {

                    updateConfirm(event);       /*Use the logic to confirm the event update properties*/

                    Evento.prototype.Update(event);     /*Modify the targeted event on the localStorage using the Update method of the Evento Class*/

                    $("#calendar").fullCalendar("updateEvent", event);
                    /*FullCalendar Method to report changes to an event and render them on the calendar.*/

                    $("#calendar").fullCalendar("refetchEvents");
                    /*FullCalendar Method to refetch events from all sources and rerender them on the screen.*/

                }
            }

And here's a gif of the issue: https://i.imgur.com/rFPvvjE.gif

UPDATE: With slicedtoad's help I isolated the issue to my updateConfirm logic:

var updateConfirm = function(event) {
    if (confirm("New title?")) {    /*Check if the user wants to change the event title*/
        event.title = prompt("Enter the new title: ");    /*Set new title for the event*/
    } else {
        event.title = event.title;
    }

    if (confirm("New description?")) {    /*Check if the user wants to change the event description*/
        event.description = prompt("Enter the new description: ");    /*Set new description for the event*/
    } else {
        event.description = event.description;
    }

    if (confirm("Is the event important?")) {   /*Check if the user wants to change the event priority*/
        event.overlap = false;
        event.backgroundColor = "red";    /*Set new priority for the event*/
    } else {
        event.overlap = true;
        event.backgroundColor = "blue";   /*Set new priority for the event*/
    }
};

UPDATE 2: console.log(event) before updateConfirm(event):

Object {id: "2015-01-27T15:29:11+00:00", title: "título", start: m, end: m, allDay: false…}_allDay: false_end: m_id: "2015-01-27T15:29:11+00:00"_start: mallDay: falsebackgroundColor: "blue"className: Array[0]description: "gt4"end: mid: "2015-01-27T15:29:11+00:00"overlap: truesource: Objectstart: mstoringId: "2015-01-27T15:29:11+00:00"title: "título"__proto__: Object

console.log(event) after updateConfirm(event):

Object {id: "2015-01-27T15:29:11+00:00", title: "título", start: m, end: m, allDay: false…}_allDay: false_end: m_id: "2015-01-27T15:29:11+00:00"_start: mallDay: falsebackgroundColor: "blue"className: Array[0]description: "gt4"end: mid: "2015-01-27T15:29:11+00:00"overlap: truesource: Objectstart: mstoringId: "2015-01-27T15:29:11+00:00"title: "título"__proto__: Object

Answer 1

Since the event is not locally sourced, calling updateEvent isn't necessary since the event will be refetched from the database when you call $("#calendar").fullCalendar("refetchEvents");

I'm not entirely sure why it would duplicate but the event modified by updateEvent seems to persist past the refetch. You must be changing it's ID or replacing it with another event object, but I wasn't able to reproduce it.

So try removing the update line

} else {
    updateConfirm(event); 
    Evento.prototype.Update(event);
    $("#calendar").fullCalendar("refetchEvents");
}

If that doesn't work, try deleting the event manually:

$("#calendar").fullCalendar( 'removeEvents', event._id ) //replace the updateEvent call with this
//or event.id if your events have an explicit id

Addendum

You likely want to actually figure out the cause of the problem since the above just patches it. Something in Evento.prototype.Update updateConfirm is modifying the event to the point that FC thinks it is a different event. Is it being copied and replacing itself? Are you playing with it's id?

Answer 2

Do singleton style solution:

This worked for me to stop the duplication which was caused by "new Draggable(container)" every time reloaded the view

$scope.Draggable = null  if ($scope.Draggable == null) {
                $scope.Draggable = new Draggable(containerEl, {
                    itemSelector: '.item',
                    eventData: function (eventEl) {
                        return {
                            title: eventEl.innerText
                        };
                    }
                });
            }