javascript - 将 FullCalendar eventRender 升级为 eventDidMount 以进行右键单击操作

Question

我想将现有的 FullCalendar (v3.9 -> v5.7) 升级eventRender到eventDidMount右键单击操作。

我有一个网页（FullCalendar v3.9.0），它使用以下eventRender代码进行右键单击操作：

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

更新到版本 5.7.0 这已被替换为事件渲染挂钩

是eventDidMount正确的方法吗？

问题 2748有一条评论建议我在下面修改的 vue 版本：

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);
  });
}

将显示上下文菜单，但是当我单击其中一个操作（例如“克隆”）时，它会从jquery中产生一个TypeError。dispatch

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)

---

eventDidMount 显示工具提示的示例。

---

样品

• 5.7.0（来自 ADyson）https://codepen.io/ADyson82/pen/GRWPmMJ
• 3.9.0 (WIP) https://codepen.io/AlexHedley/pen/VwpqbdZ

标签： javascripthtmljqueryfullcalendarfullcalendar-5