Javascript 复制和粘贴fullcalendar中的事件

Javascript 复制和粘贴fullcalendar中的事件,javascript,jquery,django,fullcalendar,Javascript,Jquery,Django,Fullcalendar,我在fullcalendar中实现了一种复制粘贴功能,如下所示: 使用eventRender回调绑定右键单击显示上下文菜单的每个事件元素。 它复制了事件 使用上下文菜单绑定每个插槽以显示粘贴功能 在菜单项上,单击“通过ajax发布数据”为事件创建新的日期和时间,并返回事件的新json,以便在日历上重新呈现。 当你可以说FullCalendarAllready有一个可编辑的事件功能时,为什么要这么麻烦呢。因为除非我弄错了,否则我希望用户能够复制一个事件,并在2、3、4天后将其移动到另一天,在那里他

我在fullcalendar中实现了一种复制粘贴功能,如下所示:

使用eventRender回调绑定右键单击显示上下文菜单的每个事件元素。 它复制了事件 使用上下文菜单绑定每个插槽以显示粘贴功能 在菜单项上,单击“通过ajax发布数据”为事件创建新的日期和时间,并返回事件的新json,以便在日历上重新呈现。 当你可以说FullCalendarAllready有一个可编辑的事件功能时,为什么要这么麻烦呢。因为除非我弄错了,否则我希望用户能够复制一个事件,并在2、3、4天后将其移动到另一天,在那里他会看到一个打开的插槽。虽然我必须处理时区和时差,但它工作得很好,因为后端在Django,使用时区。但是如果我尝试将它粘贴到另一个插槽中,它就不会工作。这是一个示例代码,请不要讨厌我

事件上下文菜单

eventRender: function (event, element){
    element.bind('contextmenu', function(e){
        e.preventDefault();
        console.log('Right clicking') 
        showContextualMenu(event, element, e);
    });
}

function showContextualMenu(event,element, e){
    $("#contextual-menu").css({
        'position':'fixed',
        'top':e.clientY,
        'left':e.clientX
    }).fadeIn(500, function (){
        $(document).bind("click", function(){
            $('#contextual-menu').hide(500);
            $(document).off("click");
        });
        options = $("#contextual-menu ul").children();
        options.one('click', function (){
            console.log("Inside click");
            if ($(this).data('action')=== "move"){
                console.log("Inside if");
                alert("Copied event to move it");
                copiedEvent = event; //Global variable inside on $(document).ready()...note the best implementation I know, but had to pass the event everywhere
                paste = true; //paste is a variable telling us that there is an event wating to be pasted elswhere.
            }
        });
    });
}        
我还用一个上下文菜单绑定了议程的窗口,这样用户就可以右键单击窗口,如果剪贴板中有要复制的事件,就可以复制它

//agenda-slots right click menu creation
var slots = $("table.fc-agenda-slots tbody").children();
slots.bind('contextmenu', function (e){
    e.preventDefault();
    if (paste===true){
        showSlotContextualMenu($(this),e);
    }
});
function showSlotContextualMenu(slot,e){
    $("#contextual-menu2 li" ).unbind('click');//If user only renders the menu but doesn't click i need to unbind the click method
    var hour = parseInt(((slot.first().text()).split(":"))[0]);//hour of the slot
    var minutes = parseInt(((slot.first().text()).split(":"))[1]);//minutes of the slot
    //start = $("#calendar").fullCalendar('getDate');//date in which i am currently (case i want to paste event on different date)
    //start.setHours(hour);
    start.setMinutes(minutes);
    //end = $("#calendar").fullCalendar('getDate'); not necessary, the sever takes the duration of initial/copied event, and calculates the end time
    $("#contextual-menu2").css({
        'top':e.pageY,
        'left':e.pageX,
        'position':'absolute'
    }).fadeIn(500, function(){
        //user can click anywhere to close menu
        $(document).bind("click", function (){
            $("#contextual-menu2").hide(500);
            $(document).off("click"); 
        });
        $("#contextual-menu2 li").one("click", function(){
            //binding once every time contextual menu is shown...Dont think its the best way, please if you have advices, would love to hear them.
            if (confirm("This will move appointment with title: "+copiedEvent.title+ ". Do you want to proceed?")){
                alert("I will save your event");
                date = $("#calendar").fullCalendar('getDate');
                //ajax call to save event on success event will be placed in this slot and removed from the previous one
                $.ajax({
                    url:"/calendar/entry/move/",
                    type:"post",
                    dataType:'json',
                    data:{
                        id: copiedEvent.id,
                        start: copiedEvent.start.toGMTString(),
                        end: copiedEvent.end.toGMTString(),
                        color:copiedEvent.color,
                        csrfmiddlewaretoken:$("input[name='csrfmiddlewaretoken']").val(),
                        year: date.getFullYear(),//new year
                        month:date.getMonth(), //new month
                        day:date.getDate(),  new date
                        hour:hour, //new hour (from slot)
                        minutes:minutes //new minutes(from slot)
                    },
                    success:function (data, status, jqXHR){
                        alert("Success, You will move "+data.title+" event");
                        event = copiedEvent;
                        event.start = data['start'];
                        event.end = data['end'];
                        console.log("about to save event"+ event.id+" "+event.start+" "+event.end);
                        $("#calendar").fullCalendar('renderEvent', event);
                            paste=false;                               
                            copiedEvent=null;

                    }
                });
            }
        });
    });

}

问题是,当我更改日期时,例如我在12月18日复制一个事件,并在12月20日粘贴它,该事件将不会呈现。警报对话框向我显示它们具有正确的数据日期等,但事件仍不会呈现。我没有将事件保存在数据库中,我只返回json格式的事件进行测试,但如果我不更改日期并在同一天粘贴它,它就会工作。似乎找不到问题所在。

我工作过。但是我对代码做了一些修改,以便更新copiedEvent。因此,我的服务器只返回新的开始日期和结束日期,如django所示

return HttpResponse(json.dumps(dict(start=start, end=end), cls=DjangoJSONEncoder), content_type="application/json")
ajax调用的成功函数

function (data, status, jqXHR){
    copiedEvent.start = data.start;
    copiedEvent.end = data.end;
    $("#calendar").fullCalendar("upadateEvent", copiedEvent);
}
现在它就像一个符咒