I'm using the fullcalendar library v4 inside a LWC. Sometimes when I reload the page where the lwc with the calendar is allocated, a console error appears. Hope someone could assist with this.
I've tried a solution found is this thread Fullcalendar - Cannot read property 'DayGrid' of undefined (also changed the files to the minified ones) but it doesn't work for me.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'DayGrid')
at TimeGridView [as constructor] (main.js:1028:45)
at new TimeGridView (main.js:1276:32)
at CalendarComponent.renderView (main.js:6250:36)
at CalendarComponent.render (main.js:6202:18)
at Component.receiveProps (main.js:3887:22)
at Calendar.renderComponent (main.js:6817:23)
at Calendar.executeRender (main.js:6774:18)
at Calendar.render (main.js:6596:22)
at j.init (weeklyWorkSummaryFullCalendar.js:1:5609)
at eval (weeklyWorkSummaryFullCalendar.js:1:5061)
My .js file where the library is loaded:
renderedCallback() {
if (this.fullCalendarInitialized) {
return;
}
this.fullCalendarInitialized = true;
Promise.all([
loadScript(this, fullcalendar + "/packages/core/main.js"),
loadStyle(this, fullcalendar + "/packages/core/main.css"),
])
.then(() => {
// got to load core first, then plugins
Promise.all([
loadScript(this, fullcalendar + "/packages/daygrid/main.js"),
loadStyle(this, fullcalendar + "/packages/daygrid/main.css"),
loadScript(this, fullcalendar + "/packages/list/main.js"),
loadStyle(this, fullcalendar + "/packages/list/main.css"),
loadScript(this, fullcalendar + "/packages/timegrid/main.js"),
loadStyle(this, fullcalendar + "/packages/timegrid/main.css"),
loadScript(this, fullcalendar + "/packages/interaction/main.js"),
loadScript(this, fullcalendar + "/packages/moment/main.js"),
loadScript(this, fullcalendar + "/packages/moment-timezone/main.js"),
]).then(() => {
console.log("Library Initialized!");
this.init();
});
})
.catch(error => {
console.log("error", error);
this.dispatchEvent(
new ShowToastEvent({
title: "Error loading FullCalendar",
variant: "error"
})
);
});
}
Refers to the image attached to see the error printed in the main.js: