FullCalendar v4 將 onclick eventListener 添加到 eventLimitClick 彈出框上顯示的事件

Question

我使用 FullCalendar v4 js 進行了自定義開發，但遇到了eventLimitClick方法的問題。

當我點擊它時，我希望彈出窗口中顯示的所有事件都有一個自定義的onclick事件監聽器，以便我在另一個自定義彈出窗口中顯示此當前事件的onclick信息。

到目前為止，這是我的方法：

eventLimitClick : function(info){
    info.segs.forEach(function(seg){
        seg.el.querySelector('div.fc-content').addEventListener('click', function(event){
            console.log('event definition', event);
        });
    });
    return "popover";
}

但這是將偵聽器添加到我已經在日歷中看到的元素中。 我也嘗試過使用hiddenSegs而不是 segs 但它不起作用。

那么有沒有什么方法可以實現這一點，而不必為所有事件創建一個自定義彈出窗口？

** 編輯 ** [包含代碼]

日歷對象

     {
        locale : 'en',
        plugins : ['dayGrid','timeGrid','list','interaction'],
        header : {
            left : 'prev,next today',
            center : 'title',
            right : 'dayGridWeek, dayGridMonth, dayGridDay'
        },
        allDaySlot : false,
        aspectRatio : 1.8,
        displayEventTime : false,
        editable : false,
        navLinks : true,
        eventLimit : true,
        views : {
            dayGridMonth : {
                eventLimit : 2
            }
        },
        events : this.eventLIST,
        datesRender : this.calendarviewRender,
        eventClick : this.calendareventClick,
        eventRender : this.calendareventRender
     }

datesRender 、 eventClick和eventRender函數：

calendarviewRender = (info) => {
    //set current and end dates
    this.endDate = info.view.activeEnd;
    this.currentDate = info.view.activeStart;
    //retrieve fresh event/task info
    this.refreshCalendar();
}
calendareventClick = (info) => {
    this.info = {id : info.event.id,
                 tipo : info.event.extendedProps.tipo,
                 tipoObj : info.event.extendedProps.tipoObj,
                 isClosed : info.event.extendedProps.isClosed && info.event.extendedProps.isClosed !== null ? (info.event.extendedProps.isClosed === 'false' ? false : true) : false,
                 campos : info.event.extendedProps.lCamposInfo};
    //allow second button
    this.info.displaysecondbutton = !this.info.isClosed && this.info.tipoObj === 'Task';
    //allow popup display
    this.allowpopup = true;
    info.jsEvent.preventDefault();
}
calendareventRender = (info) => {       
    let html = "<i class='fa fa-" + info.event.extendedProps.icon + " fa-lg'></i>";
    info.el.querySelector('div.fc-content').style.cssText = 'height: 100%;';
    //if month view apply padding
    if(info.view.type.includes('dayGrid')) info.el.querySelector('div.fc-content').classList.add('slds-p-around_x-small');
    //center elements
    info.el.querySelector('div.fc-content').classList.add('slds-align_absolute-center');
    //append icon
    info.el.querySelector('div.fc-content').innerHTML = html;
}

我還刪除了eventLimitClick 。

Answer 1

根據您的評論，我看到您正在使用 Lightning-web-components。

在銷售團隊與 LWC 合作時，我遇到了與您相同的問題。

我能夠通過在 daygrid 包中編輯 main.js 並在 Popover 被隱藏時添加延遲來解決這個問題。

這是代碼片段

function Popover(options) {
        var _this = this;
        this.isHidden = true;
        this.margin = 10; // the space required between the popover and the edges of the scroll container
        // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
        this.documentMousedown = function (ev) {
            if (_this.el && !_this.el.contains(ev.target)) {
                setTimeout(function () {
                    _this.hide();
                }, 1000);
            }
        };
        this.options = options;
    }

函數從 main.js 的第 100 行開始。 我正在使用 Fullcalendar v4