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: /

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).

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).

• javascript
• jquery
• fullcalendar
• fullcalendar-4

• "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? 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 Commented Jun 29, 2020 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 Commented Jun 29, 2020 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 Commented Jun 30, 2020 at 13:29
• Ah ok. I thought the description made it pretty clear. – ADyson Commented Jun 30, 2020 at 13:30
• @ADyson so on the v3 description (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 (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 Commented Jun 30, 2020 at 15:10

3 Answers 3

Simple solution for v5:

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

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"
}

Based on @stackoverflowing321 answer I post my solution because eventRender was an unrecognized option in my case.

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"

 },

But all the credits go to @stackoverflowing321