首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在FullCalendar v4中添加自定义右键单击快捷菜单

问在FullCalendar v4中添加自定义右键单击快捷菜单
EN

Stack Overflow用户
提问于 2020-06-30 04:51:19
回答 2查看 2K关注 0票数 0

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

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

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

但是,此代码不适用于FullCalendar v4,因为它依赖于eventRender方法的element属性,该属性在FullCalendar v4中不再可用(只有info可用)。

EN

回答 2

Stack Overflow用户

发布于 2020-06-30 23:25:47

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

有关完整的GitHub回购,请访问:https://github.com/swisnl/jQuery-contextMenu

它很容易在FullCalendar中实现,只需为上下文菜单添加一个函数和单击处理程序(来自http://swisnl.github.io/jQuery-contextMenu/demo.html的文档示例):

代码语言:javascript
复制
$(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);
        })    
});

然后简单地修改需要右键单击的所有元素(在本例中为events)的类名,以包含类“context-menu-one”:

代码语言:javascript
复制
eventRender: function(info) { //Run when events are rendered

          info.el.className = info.el.className + " context-menu-one"
}
票数 1
EN

Stack Overflow用户

发布于 2021-10-20 12:46:47

V5的简单解决方案:

代码语言:javascript
复制
eventDidMount: (arg) =>{
    const eventId = arg.event.id
    arg.el.addEventListener("contextmenu", (jsEvent)=>{
        jsEvent.preventDefault()
        console.log("contextMenu", eventId)
    })
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62646479

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档