全日歷復制和粘貼事件

Question

我已經在fullcalendar中“實現”了一種復制粘貼功能，如下所示：

1. 使用eventRender回調綁定右鍵單擊顯示上下文菜單的每個事件元素。
2. 它復制事件
3. 將每個插槽與上下文菜單綁定以顯示粘貼功能
4. 在菜單項上單擊，我通過ajax發布事件的數據（新日期和時間），並返回事件的新json，以重新顯示在日歷上。

當您可以說已經准備好完整日歷具有可編輯的事件功能時，為什么要麻煩那么多。 因為（除非我沒有記錯），我希望用戶能夠復制事件，並將其移到另一天（兩三天或四天后），在那里他看到一個空位。 它很好用（盡管我必須對時區和時差做一些事情，因為后端使用TIME_ZONE在Django中）。 但是，如果我嘗試將其粘貼到其他插槽中，它將無法正常工作。 這是示例代碼（請不要討厭mye ...）

事件上下文菜單

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中進行測試，但是如果我不更改日期並將其粘貼在同一天，它就可以正常工作。似乎找不到問題所在。

Answer 1

我工作。 但是我稍微更改了代碼，以便更新了copyedEvent。 所以我的服務器只返回新的開始和結束日期（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);
}

現在它就像一個魅力。