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

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

所以我所做的是：

在 eventRender: 函数中...我会做

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

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

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

Answer 2

从 版本 5 开始，应使用 Event Render Hooks 将一些元信息分配给标记。

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);
  }
});

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

context menu with full calendar, passing data between calendar and context menu

javascript

jquery

contextmenu

fullcalendar