FullCalendar v3.9升级v5.7 eventRender右键功能迁移eventDidMount问题

功能可行性确认 #

使用eventDidMount实现右键菜单功能是完全正确的方案，它是FullCalendar v5官方指定替代旧版eventRender的事件渲染钩子，专门用于事件元素挂载到DOM后执行自定义DOM操作，完全适配你的需求场景。

报错原因 #

你遇到的TypeError是由代码中的变量引用错误导致的：
FullCalendar v5的eventDidMount钩子仅接收一个info参数，事件元数据需要通过info.event属性获取，你修改后的代码中直接使用了未定义的event变量调用event.id，导致传递给事件处理函数的数据异常，进而触发jQuery的dispatch方法报错。

修正后的代码 #

你只需要修改eventDidMount部分的代码即可，其余原有逻辑（contextMenuHandler、事件操作函数、隐藏菜单的全局点击逻辑、HTML结构）都可以保持不变：

eventDidMount: function (info) {
  info.el.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    
    const top = e.pageY;
    const left = e.pageX;

    // 绑定事件前先清除原有绑定，避免重复触发
    $("#contextMenu").off("click", "li");
    // 显示右键菜单并绑定事件，从info.event中获取事件ID
    $("#contextMenu").show().css({ position: 'absolute' }).offset({ left: left, top: top });
    $("#contextMenu").on("click", "li", { eventId: info.event.id }, contextMenuHandler);
  });
}

额外优化提示 #

你原有全局点击隐藏菜单的逻辑里，$("#contextMenu").unbind().click(function () { })写法可以简化为$("#contextMenu").off()，功能完全一致，代码更简洁。

内容的提问来源于stack exchange，提问作者Alex Hedley