在 FullCalendar v4 中添加自定义右键单击上下文菜单

Question

我试图允许用户左键单击或右键单击 FullCalendar 的 dayGrid 视图中的事件。左键单击应该（并且确实）显示有关事件的一些信息，而右键单击应该提供一个自定义上下文菜单，我可以链接到应用程序的其他部分（例如编辑或删除事件）。

我无法使用右键单击功能，因为 eventClick 方法仅响应左键单击。我尝试过使用 mousedown 方法，但似乎无法让它工作。

理想情况下，我会有像这个小提琴中的代码一样工作的东西： https://jsfiddle.net/p52gohwn/

但是，此代码不适用于 FullCalendar v4，因为它依赖于 eventRender 方法的

element

属性，该属性在 FullCalendar v4 中不再可用（仅

info

可用）。

Answer 1

v5 的简单解决方案：

eventDidMount: (arg) =>{
    const eventId = arg.event.id
    arg.el.addEventListener("contextmenu", (jsEvent)=>{
        jsEvent.preventDefault()
        console.log("contextMenu", eventId)
    })
}

Answer 2

我发现了一个不错的 JS 插件，用于添加右键单击上下文菜单功能：https://swisnl.github.io/jQuery-contextMenu/

完整的 GitHub 存储库位于：https://github.com/swisnl/jQuery-contextMenu

只需为上下文菜单添加一个函数和单击处理程序，即可轻松在 FullCalendar 中实现（示例来自 http://swisnl.github.io/jQuery-contextMenu/demo.html 的文档）：

$(function() {
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m); 
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })    
});

然后简单地修改所有需要右键单击的元素（在本例中为事件）的类名称以包含类“context-menu-one”：

eventRender: function(info) { //Run when events are rendered

          info.el.className = info.el.className + " context-menu-one"
}

Answer 3

基于 @stackoverflowing321 的回答，我发布了我的解决方案，因为 eventRender 在我的情况下是一个无法识别的选项。

eventDidMount: (arg) => {
    const eventId = arg.event.id
    arg.el.addEventListener("contextmenu", (jsEvent) => {
        jsEvent.preventDefault()
        //console.log("contextMenu", eventId)
    })
    arg.el.className = arg.el.className + " context-menu-one"

 },

但是所有的功劳都归@stackoverflowing321