You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

FullCalendar切换视图时eventDidMount未触发所有事件的问题

问题:FullCalendar从周视图切换到月视图时,eventDidMount钩子未对所有事件执行

当从周视图切换到月视图时,FullCalendar的eventDidMount钩子仅触发了11月17日和28日的事件,1日、2日、3日、4日、5日的事件均未触发该钩子。

测试代码

eventDidMount: function (info) { console.log(info.event.title); }

切换视图后仅打印出17日和28日的事件标题,目前未找到该异常的解决方案。

问题截图

完整的eventDidMount实现代码

eventDidMount: function (info) {

    //debugger;
    const isHolidayOrAdmin =
        info.event.extendedProps.type == "HOL" ||
        info.event.extendedProps.type == "ADMIN";
    console.log(info.event.title)

    if (info.event.display == "auto") {
        let element = null;
        const childrenDay = info.el.querySelectorAll(".fc-daygrid-event-dot");
        if (childrenDay.length > 0) {
            element = childrenDay[0];
        }
        const childList = info.el.querySelectorAll(".fc-list-event-dot");
        if (childList.length > 0) {
            element = childList[0];
        }

        if (info.event.extendedProps.associateWith == "Location") {
            tippy(element, {
                theme: $scope.tooltipTheme,
                content: `${info.event.extendedProps.location}`,
                arrow: true,
                placement: "top",
                delay: 0,

                maxWidth: 350,
                followCursor: true,
                allowHTML: true,
                animation: "fade",
                duration: 100,
            });
        } else if (info.event.extendedProps.associateWith == "Department") {
            tippy(element, {
                theme: $scope.tooltipTheme,
                content: `${info.event.extendedProps.department}`,
                arrow: true,
                placement: "top",
                delay: 0,

                maxWidth: 350,
                followCursor: true,
                allowHTML: true,
                animation: "fade",
                duration: 100,
            });
        }
    }
    if (isHolidayOrAdmin) {

        info.el.style.border = "1px solid black";
        // console.log($(info.el).parents('td').find('.fc-daygrid-day-number').text() )

        //console.log($($(info.el).parents('td')[0]).find('.fc-daygrid-day-number').text())
        //console.log(info.el.getElementsByClassName('fc-daygrid-day-number')[0])
        //    console.log(info.view.type)

        if (info.view.type == "dayGridMonth") {


            $(info.el).addClass("holiday-event");
            $(info.el).addClass("leave-top-event");
            //$(info.el).find('.fc-daygrid-event-dot').hide();
            //$(info.el).find('.fc-event.title').css('max-width', '60% !important');
            //$(info.el).find('.fc-event.title').css('overflow', 'hidden');


            info.el.style.marginBottom = "5%";
            const dayNo = $($(info.el).parents('td')[0]).find('.fc-daygrid-day-number').text();
            info.el.getElementsByClassName('fc-event-title')[0]?.insertAdjacentHTML('afterend', `<span>${dayNo}</span>`)
        }

        $(info.el)
            .closest("td")
            .find(".fc-daygrid-day-number")
            .css("z-index", 999999);
        $(info.el)
            .closest("td")
            .find(".fc-daygrid-day-number")
            .css("color", "#fff");

        info.el.style.backgroundColor = "red";
        info.el.style.zIndex = "100";
        info.el.style.textAlign = "start";

        tippy(info.el, {
            theme: $scope.tooltipTheme,
            content:
                info.event.extendedProps.type == "HOL" ? `Holiday` : `Admin Day`,
            arrow: true,
            placement: "top",
            delay: 0,

            maxWidth: 350,
            followCursor: true,
            allowHTML: true,
            animation: "fade",
            duration: 100,
        });
    }

    if (info.view.type == "listMonth" || info.view.type == "dayGridDay") {
        info.el.style.fontSize = "18px";
        info.el.style.lineHeight = "20px";

        if (info.view.type == "listMonth") {
            info.el.style.display = "revert";
            $(info.el).find("td:nth-child(1)").attr("colspan", 3);
            let requestNote =
                info.event.extendedProps.description == null || isHolidayOrAdmin
                    ? ""
                    : `<span style="margin-left:15%">${info.event.extendedProps.description}</span>`;
            $(info.el)
                .find("td:nth-child(1)")
                .append(
                    `<a tabindex="0" class="btn" style="pointer-events: none;padding: 0;min-width: 300px;text-align: left;color:#fff">${info.event.extendedProps.fullName}</a>` +
                    requestNote
                );
            $(info.el).find("td:nth-child(2)").hide();
            //$(info.el).find('.fc-list-event-dot').hide();
            $(info.el).removeClass("fc-list-event");
        }

        if (info.view.type == "dayGridDay") {
            window.setTimeout(function () {
                let requestNote =
                    info.event.extendedProps.description == null || isHolidayOrAdmin
                        ? ""
                        : `<span style="margin-left:15%">${info.event.extendedProps.description}</span>`;
                $(info.el).find(".fc-event-title").html("");
                $(info.el).find(".fc-event-title").text("");
                $(info.el)
                    .find(".fc-event-title")
                    .append(
                        `<a tabindex="0" class="btn" style="pointer-events: none; padding: 0;min-width: 300px;text-align: left;color:#fff">${info.event.extendedProps.fullName}</a>` +
                        requestNote
                    );
            }, 2);
        }
    }

    if (info.event.extendedProps.status == "Processing") {
        info.el.style.opacity = "0.5";
        if (info.view.type == "listMonth") {
            $(info.el)
                .find(".fc-list-event-graphic")
                .append(
                    `<i style="margin-right:5px" class="fa fa-exclamation-circle pull-right" aria-hidden="true"></i>`
                );
        } else {
            $(info.el)
                .find(".fc-event-title")
                .append(
                    `<i style="margin-right:5px" class="fa fa-exclamation-circle pull-right" aria-hidden="true"></i>`
                );
        }

        const el = info.el.querySelectorAll(".fa-exclamation-circle")[0];
        tippy(el, {
            theme: $scope.tooltipTheme,
            content: `Pending`,
            arrow: true,
            placement: "top",
            delay: 0,

            maxWidth: 350,
            followCursor: true,
            allowHTML: true,
            animation: "fade",
            duration: 100,
        });
    }
    $("#divEmployeeContainer").css(
        "max-height",
        $("#div-calendar").height() - 65
    );
    $("[data-date='" + $scope._selectedDate + "']")
        .find("th")
        .addClass("list-highlight");
    //console.log($("[data-date='" + $scope._selectedDate + "']").find('th'))

    window.setInterval(function () {
        $(".fc-dayGridDay-view")
            .find(".fc-highlight")
            .removeClass("fc-highlight");
    }, 10);
},

内容的提问来源于stack exchange,提问作者Amaresh Adak

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.12 23:40:26