Upgrade FullCalendar eventRender to eventDidMount for Right Click Action

I'd like to Upgrade my existing FullCalendar (v3.9 -> v5.7) eventRender to eventDidMount for a Right Click Action.

I have a webpage (FullCalendar v3.9.0) which has a right click action using the following eventRender code:

eventRender: function (event, element, view) {
    element.bind('contextmenu', function (e) {
        e.preventDefault();

        var top = e.pageY;
        var left = e.pageX;

        // Display contextmenu and bind event for menu click events
        $("#contextMenu").show();
        $("#contextMenu").css({ position: 'absolute' });
        $("#contextMenu").offset({ left: left, top: top });
        $("#contextMenu").on("click", "li", { eventId: event.id }, contextMenuHandler);
    });
}

function contextMenuHandler(event) {
    var idx = $(this).index();
    console.log(idx + '  ' + event.data.eventId);

    switch( idx )
    {
        // Miss 2 out as that is line separator
        case 0: cloneEvent(event.data.eventId); break;
        case 1: copyEvent(event.data.eventId); break;
        case 3: deleteEvent(event.data.eventId); break;
        default:
    }
}

$(document).on('click', function (e) {
    $("#contextMenu").hide();
    $("#contextMenu").unbind().click(function () { }); // Make sure click event is removed from contextmenu otherwise it will fire multiple times!
});

function editEvent(id) {
    alert('edit');
}

function deleteEvent(id) {
  //if (confirm("Confirm Deletion?")) {
      alert('delete');
  //}
}

function cloneEvent(id) {
    alert('clone');
}

function copyEvent(id) {
    alert('copy');
}

<div>
    <div id="calendar"></div>


    <ul id="contextMenu" class="dropdown-menu" role="menu">
        <li><a tabindex="-1" href="#">Clone</a></li>
        <li><a tabindex="-1" href="#">Copy</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Delete</a></li>
    </ul>
</div>

omitted

Updating to version 5.7.0 this has been replaced with Event Render Hooks

Is eventDidMount the correct way to go?

Issue 2748 has a comment suggesting a vue version which I've modified below:

eventDidMount: function (info) {
  info.el.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    
    var top = e.pageY;
    var left = e.pageX;

    // Display contextmenu and bind event for menu click events
    $("#contextMenu").show();
    $("#contextMenu").css({ position: 'absolute' });
    $("#contextMenu").offset({ left: left, top: top });
    $("#contextMenu").on("click", "li", { eventId: event.id }, contextMenuHandler);
  });
}

The contextmenu will show, but when I click on one of the actions, like "Clone", it produces a TypeError from the dispatch in jquery.

TypeError: ((S.event.special[o.origType]||{}).handle||o.handler).apply is not a function. (In '((S.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s)', '((S.event.special[o.origType]||{}).handle||o.handler).apply' is undefined)

Example showing eventDidMount tooltip.

Samples

5.7.0 (from ADyson) https://codepen.io/ADyson82/pen/GRWPmMJ
3.9.0 (WIP) https://codepen.io/AlexHedley/pen/VwpqbdZ

Recommended topics

Hot tags