时间戳

首页 > 解决方案 > 在 FullCalendar v4 中添加自定义右键单击上下文菜单

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

问题描述

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

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

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

但是，此代码不适用于 FullCalendar v4，因为它依赖于elementeventRender 方法的属性，该方法在 FullCalendar v4 中不再可用（仅info可用）。

标签： javascriptjqueryfullcalendarfullcalendar-4

解决方案

我找到了一个不错的 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"
}

推荐阅读