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

Question

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

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

理想情况下，我希望像这个fiddle中的代码一样正常工作：https://jsfiddle.net/p52gohwn/ 然而，这段代码对于FullCalendar v4不起作用，因为它依赖于eventRender方法的element属性，而在FullCalendar v4中不再可用（只有info可用）。

- stackoverflowing321

---

“在FullCalendar v4中，eventRender方法不再依赖于元素属性（只有info可用）。” 而根据文档https://fullcalendar.io/docs/v4/eventRender，`info`包含（以及其他内容）... el: 被渲染的HTML元素。它已经被正确地填充了时间/标题文本。 所以该元素仍然可用，只是被移动到一个对象的属性中。（同时它是一个DOM元素而不是jQuery对象，但这很容易解决）。 该事件的HTML元素。 - ADyson

我有点困惑，你怎么没在文档中找到这个问题的解决方法呢？ - ADyson

@ADyson 是的，我找到了 info 属性的 el 项，我猜我只是没有意识到它相当于 v3 中使用的 element 属性。 - stackoverflowing321

啊，好的。我以为描述已经很清楚了。 - ADyson

@ADyson，所以在v3的描述（https://fullcalendar.io/docs/v3/eventRender）中说`element`是“将用于渲染的新创建的jQuery元素”，但是在v4文档（https://fullcalendar.io/docs/v4/eventRender）中却说`info.el`是“正在被渲染的HTML元素”。我原以为'jQuery元素'和'HTML元素'之间有区别呢？ - stackoverflowing321

有的。我在上面的第一条评论中已经注意到了这个细微的差别。但是在你发布的JSFiddle中，所有的代码都只是从jQuery对象中提取HTML元素然后使用它。所以对于你的目的来说，除了语法上的小改变之外，实际上没有什么区别。 - ADyson

Answer 1

针对v5的简单解决方案：

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

- Paulus Limma

---

他们在问题中已经提到了V4。 - Shoyeb Sheikh

也许这个问题是在v5发布之前被问到的。不管怎样，这个答案可能会对像我一样正在寻找v5答案的任何人有所帮助。 - Paulus Limma

这个解决方案在版本6中也解决了我的问题，非常感谢。 - El Ghandor Yasser

Answer 2

我发现了一个很好的JS插件，可以添加右键上下文菜单功能：https://swisnl.github.io/jQuery-contextMenu/ 完整的GitHub Repo在这里：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"
}

- stackoverflowing321

---

如何在上下文菜单项中获取事件ID？我需要在每个项的回调函数中使用事件ID。 - undefined

info对象包含事件作为其属性之一。因此，您只需从事件本身获取事件ID，例如：info.event.id。https://fullcalendar.io/docs/v4/eventRender - undefined

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

- cwhisperer