我想在fullcalendar中创建一个简单的复制并粘贴右键菜单functionaliuty。所以我使用eventRender回调来打开这样的上下文菜单:
eventRender: function (event, element){
element.bind('contextmenu', function(e){
e.preventDefault();
console.log('Right clicking');
showContextualMenu(event, element, e);
});
}
function showContextualMenu(event,element, e){
console.log(event);
if (event.canceled){
$("#contextual-menu li#cancel").html("Undo Cancel");
}else{
$("#contextual-menu li#cancel").html("Cancel Appointment");
}
$("#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");
});
var 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;
paste = true;
}else {
if (!event.canceled) {
console.log("Not canceled");
console.log("Cancel");
var reason_id = $("#reason").prop('id');
$("#modal-cancel").attr('data-id', event.id);
$("#modal-cancel").modal('show')
}else {
uncancelEvent(event);
}
}
});
});
}
我还选择了所有日期插槽并将它们绑定到上下文菜单两个以显示粘贴菜单
var slots;
slots = $(".fc-slats > table tbody tr ").find("td:eq(1)");
console.log(slots.length);
slots.bind('contextmenu', function (e){
console.log("binding slots");
console.log(paste);
e.preventDefault();
if (paste===true) {
showSlotContextualMenu($(this), e);
}
它很好用,直到我选择搬到另一天。然后绑定丢失并点击一天插槽不会显示上下文菜单。这是为什么?