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