具有完整日历的上下文菜单，在日历和上下文菜单之间传递数据

Question

我正在使用jquery上下文菜单，带有Adam Shaw的完整日历（在事件右键单击上）。它运行良好，但是，如何传递事件 UI 上显示的数据以外的数据，在事件单击到上下文菜单？我尝试通过 .targetdata 传递信息，但没有成功。请帮忙！

$('#calendarView').fullCalendar({
    eventRender: function(event, element) {
        var originalClass = element[0].className;
        element[0].className = originalClass + ' hasmenu';
    },
    eventClick: function(calEvent, jsEvent, view) {
        //need to pass calEvent.ID to context menu                   
    },
});
$('#calendarView').contextmenu({
    delegate: ".hasmenu",
    preventContextMenuForPopup: true,
    preventSelect: true,
    menu: [{
        title: "Edit Booking",
        cmd: "Edit",
        action: function(event, ui) {}
    }, {
        title: "Delete Booking",
        cmd: "Delete",
        action: function(event, ui) {
            //need to pick up calEvent.ID here
        }
    }],
    select: function(event, ui) {
        // Logic for handing the selected option
    },
    beforeOpen: function(event, ui) {
        ui.menu.zIndex($(event.target).zIndex() + 1);
    },
});

Answer 1

所以我

所做的是：

1. 在事件渲染中：函数... 我会做的

element.attr('data-event-id', event.id); element.addClass('context-class');

然后在文档就绪函数中将上下文菜单附加到所有 .context-class 元素。

在上下文菜单代码中，您可以获取元素，并且可以根据需要提取"data-"属性

Answer 2

从版本 5 开始，应该使用事件渲染钩子为标记分配一些元信息。

const idCustomAttributeName = 'data-event-id';
const calendar = new Calendar(element, {
  ..
  eventDidMount: info => {
    const id = info.event.id;
    $('.fc-event-main-frame', info.el).attr(idCustomAttributeName, id);
  }
};
$.contextMenu({
  selector: '.fc-event-main-frame',
  callback: (key, options) => {
    ..
    const eventId = options.$trigger.attr(idCustomAttributeName);
  }
});