我正在尝试允许用户在FullCalendar的dayGrid视图中左键单击或右键单击事件。左键单击应该(并且确实)显示有关事件的一些信息,而右键单击应该提供一个自定义上下文菜单,我可以将该菜单链接到应用程序的其他部分(例如编辑或删除事件)。
我无法使用右键单击功能,因为eventClick方法只对左键单击作出响应。我曾尝试使用mousedown方法,但似乎无法使其正常工作。
理想情况下,我应该有像这个小提琴中的代码一样工作的东西:https://jsfiddle.net/p52gohwn/
但是,此代码不适用于FullCalendar v4,因为它依赖于eventRender方法的element属性,该属性在FullCalendar v4中不再可用(只有info可用)。
发布于 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的文档示例):
$(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”:
eventRender: function(info) { //Run when events are rendered
info.el.className = info.el.className + " context-menu-one"
}发布于 2021-10-20 12:46:47
V5的简单解决方案:
eventDidMount: (arg) =>{
const eventId = arg.event.id
arg.el.addEventListener("contextmenu", (jsEvent)=>{
jsEvent.preventDefault()
console.log("contextMenu", eventId)
})
}https://stackoverflow.com/questions/62646479
复制相似问题