在FullCalendar中使用Martin Wendt右键菜单控件遇TypeError错误求助

我之前也碰到过一模一样的错误，折腾了好一会儿才找到根源，主要是两个小问题导致的，咱们一步步来解决：

问题核心原因 #

1. 脚本依赖顺序颠倒：jquery.ui.position.js 是 jquery.contextMenu.min.js 的必备依赖组件，必须先加载它。你现在的加载顺序搞反了，导致右键菜单插件初始化时找不到关键的定位方法，进而引发事件处理逻辑异常，就出现了那个apply is not a function的错误。
2. 手动拼接className的风险：直接修改DOM元素的className属性，有可能不小心覆盖FullCalendar绑定事件所需的内置类，或者引入重复类名，用jQuery的addClass()方法会更稳妥安全。

具体修正步骤 #

1. 调整脚本加载顺序 #

把原来的：

<script src="../Scripts/jquery.contextMenu.min.js"></script>
<script src="../Scripts/jquery.ui.position.js"></script>

改成：

<script src="../Scripts/jquery.ui.position.js"></script>
<script src="../Scripts/jquery.contextMenu.min.js"></script>

2. 优化类名添加方式 #

替换eventRender和dayRender里的类名操作代码：
原来的：

eventRender: function (event, element) {
    var originalClass = element[0].className;
    element[0].className = originalClass + ' hasmenu';
},
dayRender: function (day, cell) {
    var originalClass = cell[0].className;
    cell[0].className = originalClass + ' hasmenu';
}

改成更简洁安全的：

eventRender: function (event, element) {
    element.addClass('hasmenu');
},
dayRender: function (day, cell) {
    cell.addClass('hasmenu');
}

完整修正后的代码 #

<html>
<head>
<meta charset='utf-8' />
<link href="../Scripts/assets/plugins/calendar/dist/fullcalendar.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/jquery.contextMenu.min.css">
<style>
body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; }
#calendar { max-width: 900px; margin: 0 auto; }
</style>
</head>
<body>
<div id='calendar'></div>
<script src='../Scripts/assets/plugins/jquery/jquery.min.js'></script>
<script src="../Scripts/assets/plugins/calendar/jquery-ui.min.js"></script>
<script src="../Scripts/assets/plugins/moment/moment.js"></script>
<script src='../Scripts/assets/plugins/calendar/dist/fullcalendar.min.js'></script>
<!-- 先加载依赖的定位组件 -->
<script src="../Scripts/jquery.ui.position.js"></script>
<!-- 再加载右键菜单插件 -->
<script src="../Scripts/jquery.contextMenu.min.js"></script>
<script>
$('#calendar').fullCalendar({
defaultDate: '2019-08-12',
editable: true,
eventLimit: true,
events: [
{ title: 'All Day Event', start: '2019-08-01' },
{ title: 'Long Event', start: '2019-08-07', end: '2019-08-10' },
{ title: 'Conference', start: '2019-08-11', end: '2019-08-13' },
{ title: 'Meeting', start: '2019-08-12T10:30:00', end: '2019-08-12T12:30:00' }
],
eventRender: function (event, element) {
    element.addClass('hasmenu');
},
dayRender: function (day, cell) {
    cell.addClass('hasmenu');
}
})
$(document).contextmenu({
delegate: ".hasmenu",
preventContextMenuForPopup: true,
preventSelect: true,
menu: [
{ title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors" },
{ title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy" },
{ title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
],
select: function (event, ui) {
    // Logic for handing the selected option
},
beforeOpen: function (event, ui) {
    ui.menu.zIndex($(event.target).zIndex() + 1);
}
});
</script>
</body>
</html>

这样修改之后，右键菜单应该就能正常弹出，不会再出现那个棘手的错误了。本质上就是解决了插件依赖的加载顺序问题，同时优化了DOM操作的安全性。

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