Add custom right click context menu in FullCalendar v4

Question

I am trying to allow the user to either left click or right click on an event in the dayGrid view of FullCalendar. Left clicking should (and does) bring up some information about the event, while right clicking should provide a custom context menu that I can link to other parts of the application (such as edit or delete the event).

I cannot get the right click functionality to work, as the eventClick method only responds to a left-click. I have tried to use the mousedown method but I cannot seem to get it to work.

Ideally I would have something that works just like the code in this fiddle: https://jsfiddle.net/p52gohwn/

This code doesn't work for FullCalendar v4, however, because it relies on the element attribute of the eventRender method, which is no longer available in FullCalendar v4 (only info is available).

_"relies on the element attribute of the eventRender method, which is no longer available in FullCalendar v4 (only info is available)."_ ....and what does `info` contain, as per the documentation? https://fullcalendar.io/docs/v4/eventRender says it contains (among other things).... `el: The HTML element that is being rendered. It has already been populated with the correct time/title text.` So the element is still available, it's just been moved into a property of an object. (And also it's a DOM element not a jQuery object, but that's easily solved). The HTML element for this event.` — ADyson, Jun 29 '20 at 21:22
P.S. I'm struggling a bit to figure out how you didn't manage to spot that in the documentation...? — ADyson, Jun 29 '20 at 21:23
@ADyson yeah I found the `el` item of the `info` attribute, I guess I just didn't realize that it was equivalent to the `element` attribute used in v3 — stackoverflowing321, Jun 30 '20 at 13:29
@ADyson so on the v3 description (https://fullcalendar.io/docs/v3/eventRender) it says that `element` is 'a newly created jQuery element that will be used for rendering', but then on the v4 documentation (https://fullcalendar.io/docs/v4/eventRender) it says that `info.el` is 'The HTML element that is being rendered'. I thought that there was a difference between a 'jQuery element' and an 'HTML element'? — stackoverflowing321, Jun 30 '20 at 15:10
There is. I already noted that slight difference in my first comment above. But in the JSFiddle you posted, all the code does us extract the HTML element from inside the jQuery object and then use it. So for your purposes there will be no real difference except a minor change of syntax — ADyson, Jun 30 '20 at 15:18

score 12 · Answer 1 · answered Oct 20 '21 at 12:46

12

Simple solution for v5:

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

answered Oct 20 '21 at 12:46

Paulus Limma

432
6
10

They already mentioned V4 in question. – Shoyeb Sheikh Oct 20 '21 at 12:57
3

Maybe the question was asked before v5 was released. Anyway, this answer may benefit anybody seeking answer for v5 like I was. – Paulus Limma Oct 21 '21 at 13:14
this solve my issue in version 6 as well , much appreciated – El Ghandor Yasser Dec 05 '22 at 08:49

score 1 · Answer 2 · answered Jun 30 '20 at 15:25

I found a nice JS plugin for adding right click context menu functionality: https://swisnl.github.io/jQuery-contextMenu/

With the full GitHub Repo at: https://github.com/swisnl/jQuery-contextMenu

It's easily implemented in FullCalendar by simply adding a function and click handler for the context menu (example from the documentation at 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);
        })    
});

And then simply modifying the class name of all elements that are desired to be right clicked (in this case events) to contain the class 'context-menu-one':

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

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

Add custom right click context menu in FullCalendar v4

2 Answers2