6

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

Alex Hedley
  • 776
  • 10
  • 24
  • Struggling to get a reproducible example of this - this is my fiddle so far: https://codepen.io/ADyson82/pen/GRWPmMJ . But what plugin are you using for the context menu? I'm guessing I'll need to put that in before it'll show the error. – ADyson Jun 15 '21 at 09:05
  • Sorry just updated the codepen with the rest of the code you provided. Aside from missing CSS, it's showing the menu successfully, no errors. Using jQuery 3.6.0 and fullCalendar 5.7.0. https://codepen.io/ADyson82/pen/GRWPmMJ . So unless you have some other code somehow conflicting with it, or you're using another version of one of those libraries, it's not clear that there is an issue here. – ADyson Jun 15 '21 at 09:09
  • 1
    P.S. Just so you know, `.unbind()` is deprecated in jQuery - and has been for many years. It's recommended to use `.off()` instead - see https://api.jquery.com/unbind/ – ADyson Jun 15 '21 at 09:11
  • Sorry I should have created some samples, thanks for going to the effort I've started one for 3.9.0 (WIP) https://codepen.io/AlexHedley/pen/VwpqbdZ For 5.7.0 I can get the contextmenu to show, but when I click on one of the items it doesn't show the `alert()` (or run the function I'll actually need) – Alex Hedley Jun 15 '21 at 09:21
  • Ok thanks. I've added the rest of the code into the 5.7 example. The alerts work fine: see https://codepen.io/ADyson82/pen/GRWPmMJ again. So if it's not working in your real environment I suggest a) checking what you've done matches what I've shown exactly, and b) stripping out everything else from the page piece by piece until you find whatever is getting in the way. – ADyson Jun 15 '21 at 10:03
  • Thanks, I'll give that a try and see what's different in my local example. – Alex Hedley Jun 15 '21 at 10:04
  • @ADyson do you want to add the codepen link as an answer and I can mark as solution? – Alex Hedley Jun 15 '21 at 13:15
  • I could, but...does it really qualify as an answer to your problem? All I've done is copy your code into a clean environment, and it works. That doesn't help to resolve why you've got an issue when you run it yourself. Have you now fixed that issue? Did you find the cause? – ADyson Jun 15 '21 at 13:33
  • Fair enough, just thought you deserved some extra credit for your effort, appreciate you looking into it – Alex Hedley Jun 15 '21 at 13:34
  • I've got plenty of reputation points, but thanks. I don't want to post something which doesn't fully resolve the issue and is unlikely to be all that helpful to someone else in future who might have a similar issue. We really need to get to the root cause of your error message, and fix it. I'm happy to continue to help with that, if you can provide information which allows me to reproduce that issue. – ADyson Jun 15 '21 at 13:36
  • Great thanks, still looking into it, will post back when I’ve got more info – Alex Hedley Jun 15 '21 at 13:37

0 Answers0