0

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: main.js code error

Krmn
  • 41
  • 5

0 Answers0