Javascript Fullcalendar正在拖放时复制事件

Javascript Fullcalendar正在拖放时复制事件,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,当我将事件拖到另一个时间段时,我的fullcalendar会直观地复制这些事件。我将代码简化为eventDrop以隔离问题,但我无法理解问题。 如果我将事件存储到我的本地存储中,我不会在存储中获得副本,并且在重新加载页面时副本会消失。这意味着问题只存在于视觉上,并且只存在于完整的日历中。 然而,这显然是一个巨大的问题,因为我不想重新加载页面:我想留在当前视图中更改我需要的内容 以下是我的eventDrop代码: eventDrop: function(event, delta, revertFu

当我将事件拖到另一个时间段时,我的fullcalendar会直观地复制这些事件。我将代码简化为eventDrop以隔离问题,但我无法理解问题。 如果我将事件存储到我的本地存储中,我不会在存储中获得副本,并且在重新加载页面时副本会消失。这意味着问题只存在于视觉上,并且只存在于完整的日历中。 然而,这显然是一个巨大的问题,因为我不想重新加载页面:我想留在当前视图中更改我需要的内容

以下是我的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.*/

                }
            }
以下是该问题的gif:

更新:在SlicedLoad的帮助下,我将问题隔离到我的updateConfirm逻辑:

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*/
    }
};
更新2:
console.log(事件)
更新确认(事件)之前:

console.log(事件)
更新确认(事件)之后:


由于事件不是本地来源的,因此无需调用
updateEvent
,因为在调用
$(“#日历”).fullCalendar(“refetchEvents”)时,将从数据库中重新提取事件

我不完全确定它为什么会重复,但是由
updateEvent
修改的事件似乎会持续到refetch之后。您必须更改它的ID或用另一个事件对象替换它,但我无法复制它

因此,请尝试删除更新行

} else {
    updateConfirm(event); 
    Evento.prototype.Update(event);
    $("#calendar").fullCalendar("refetchEvents");
}
如果不起作用,请尝试手动删除事件:

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


您可能希望实际找出问题的原因,因为上面所述只是对其进行了修补。
Evento.prototype.Update
updateConfirm
中的某些内容正在修改事件,使FC认为它是一个不同的事件。它是否被复制并替换自身?你在玩弄它的id吗?

使用单例解决方案:

这对我起到了阻止“新可拖动(容器)”导致的复制的作用 每次都重新加载视图

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

嗯,我能用你的答案把它分离出来。。。这是我的更新坚定的逻辑是错误的。我正在用该代码更新问题。@mesosteros错了,因为它对事件进行了错误的更改?updateConfirm只检查用户是否要更改事件标题、描述、是否是全天事件等。。。我添加了逻辑代码。@Mesostros我仍然无法重现这个问题。这应该是在模拟你在做什么,我已经把它弄清楚了。这是提示。第一个是精确的(event.title=prompt(“输入新标题:”);)它在内部获得两个事件对象。。。虽然我对为什么感到惊讶。以前从未见过这种行为。不再有效…:(
$("#calendar").fullCalendar( 'removeEvents', event._id ) //replace the updateEvent call with this
//or event.id if your events have an explicit id
$scope.Draggable = null  if ($scope.Draggable == null) {
                $scope.Draggable = new Draggable(containerEl, {
                    itemSelector: '.item',
                    eventData: function (eventEl) {
                        return {
                            title: eventEl.innerText
                        };
                    }
                });
            }