0
粘貼一個事件我已經「實現」一類的fullcalendar複製粘貼功能，像這樣：複製和fullcalendar
- 使用eventRender回調綁定顯示上下文菜單的每一個事件元素上點擊右鍵。
- 它複製事件
- 綁定每個時隙與上下文菜單顯示粘貼功能
- 在菜單項，點擊我通過AJAX（新的日期和時間）事件發佈的數據，並返回一個新事件的json，在日曆上回放。
當您可以說完整日曆allready具有可編輯的事件功能時，爲什麼會遇到這麼多麻煩。因爲（除非我錯了），我希望用戶能夠複製一個事件，並將其移動到不同的日子（2或3或4天后），在那裏他看到一個空位。它效果很好（雖然我必須對時區和時間差異做些事情，因爲後端在Django中，使用TIME_ZONE）。但是，如果我嘗試將其粘貼到不同的插槽中，它就不會工作。下面是一個示例代碼（請不要恨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;
}
});
}
});
});
}
的問題是，當我改變一天e.g我在12月18日複製事件，並去其粘貼12月20日的事件將不會呈現。警報對話框告訴我他們有正確的數據（日期等），但事件不會呈現。我還沒有將事件保存在數據庫中，我只在json中返回事件進行測試，但是它起作用，如果我不改變日期並在同一天粘貼它，似乎無法找到問題所在。