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
相关产品推荐
相关产品推荐

