上下文菜单与完整日历，如何在日历和上下文菜单之间传递数据

Question

我正在使用jquery上下文菜单，并与Adam Shaw的全日历（在事件右键单击时）一起使用。 它运行得非常好，但是，我如何将除事件UI外的其他数据传递到上下文菜单中的eventClick？我尝试通过.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);
    },
});

- Sandra Patta

Answer 1

所以我做的是：

1. 在eventRender: function...中，我会执行以下操作：

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

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

在上下文菜单代码内部，您可以获取元素并提取出所需的"data-"属性。

- warath-coder

---

谢谢！非常好用。不过，我不得不稍微修改一下代码，因为日历插件和上下文菜单选择了两个不同的元素。所以最终我在上下文菜单中使用了这段代码：menu: [{ title: "删除预订", cmd: "Delete", action: function(event, ui) { var eventID = ui.target.closest('a').attr("data-event-id"); } }], - Sandra Patta

你好，你能在资源上也做到这个吗？我需要一个资源的上下文菜单，但是要知道资源上不存在选择。 - cwhisperer

在fullcalendar 4.0中，不支持element，因此我将“class”作为事件对象的extendedProps添加，然后基于此类名添加上下文菜单，但是当我单击特定事件上的上下文菜单时无法发送事件ID详细信息，因为我只能获取事件标题（这是在UI目标上显示的内容），如何像上面提到的那样获取该特定事件的ID（例如element.attr('data-event-id', event.id);），请建议。 - Prabha

你好，我通过事件渲染实现了以下代码：eventRender: function eventRender( info ) { info.el.setAttribute("idgiven",info.event.id); } - Prabha

Answer 2

从版本5开始，应使用{{link1：事件渲染钩子}}将一些元信息分配给标记。

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

- vladimir