Not able to load FullCalendar premium plugin and load views in LWC Salesforce

Question

I am trying to load a view from a premium plugin on a click of a button in my LWC but when I do so I get an exception "Error: The FullCalendar view "resourceTimeGridDay" does not exist. Make sure your plugins are loaded correctly.". Though I'm loading all the required plugins as well as I have set the schedulerLicenseKey.

The version used is FullCalendar Core Package v4.3.1

Source Code -->

/* eslint-disable no-console */
import { LightningElement, api, track } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import fullCalendar from "@salesforce/resourceUrl/fullCalendar_v4_premium";
import { loadStyle, loadScript } from "lightning/platformResourceLoader";
import getEventsNearbyDynamic from "@salesforce/apex/FullCalendarController.getEventsNearbyDynamic";
import { NavigationMixin } from 'lightning/navigation';

//global variables
var objectName;
var startField;
var endField;
var colorField;
var additionalFilter;
var allDayField;
var titleField;

export default class FullCalendarComponent extends NavigationMixin(LightningElement) {
    calendar;
    fullCalendarInitialized = false;

    @api titleField;
    @api objectName;
    @api startField;
    @api endField;
    @api colorField;
    @api additionalFilter;
    @api aspectRatio;
    @api allDayField;
    @api height;

    @api weekView;
    @api dayView;
    @api listView;

    @track calendarLabel;


    connectedCallback() {
        this.addEventListener('fceventclick', this.handleEventClick.bind(this));
        //this.addEventListener('mousewheel', this.handleScroll.bind(this));  
    }

    renderedCallback() {
        if (this.fullCalendarInitialized) {
            return;
        }
        this.fullCalendarInitialized = true;

        //set global vars
        objectName = this.objectName;
        startField = this.startField;
        endField = this.endField;
        colorField = this.colorField;
        additionalFilter = this.additionalFilter;
        allDayField = this.allDayField;
        titleField = this.titleField;

        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([
                    ///packages-premium/resource-timegrid/main.min.js
                    loadScript(this, fullCalendar + "/packages/daygrid/main.js"),
                    loadScript(this, fullCalendar + "/packages-premium/resource-timegrid/main.min.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("init");
                    this.init();
                });
            })
            .catch(error => {
                console.log("error", error);
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: "Error loading FullCalendar",
                        //message: error.message,
                        variant: "error"
                    })
                );
            });
    }

    init() {
        var calendarEl = this.template.querySelector(".calendar");
        // eslint-disable-next-line no-undef
        this.calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
            plugins: [
                "dayGrid",
                "timeGrid",
                "list",
                "interaction",
                "moment",
                "moment-timezone",
                "resource-common",
                "resource-daygrid",
                "resource-timegrid",
                "resource-timeline",
                "timeline",
                //'resourceTimeGrid'
            ],
            resources: [
                {
                    id: 'a',
                    title: 'Room A'
                },
                {
                    id: 'b',
                    title: 'Room B'
                }
            ],
            views: {
                listDay: { buttonText: "list day" },
                listWeek: { buttonText: "list week" },
                listMonth: { buttonText: "list month" },
                timeGridWeek: { buttonText: "week time" },
                timeGridDay: { buttonText: "day time" },
                dayGridMonth: { buttonText: "month" },
                dayGridWeek: { buttonText: "week" },
                dayGridDay: { buttonText: "day" },
                resourceTimeGridDay: { buttonText: "resource view" }
            },

            eventClick: info => {
                const selectedEvent = new CustomEvent('fceventclick', { detail: info });
                console.log("eventClick", info);
                this.dispatchEvent(selectedEvent);
            },
            eventMouseEnter: info => { console.log("mouse enter", info) },
            dateClick: info => { console.log("date click", info) },
            header: false,
            /*header: {
              left: "title",
              center: "today prev,next",
              right:
                "listDay,listWeek,listMonth,timeGridWeek,timeGridDay,dayGridMonth,dayGridWeek,dayGridDay"
            },*/
            eventSources: [
                /*{
                  events: 'this.eventSourceHandler',
                  id: "custom"
                },*/
                {
                    events: "https://fullcalendar.io/demo-events.json",
                    id: "demo"
                }
            ]
        });
        this.calendar.render();
        this.calendarLabel = this.calendar.view.title;
    }

    nextHandler() {
        try {
            this.calendar.next();
            this.calendarLabel = this.calendar.view.title;
        } catch (exceptionVar) {
            console.log('exceptionVar--> ' + exceptionVar)
        }


    }

    previousHandler() {
        try {
            this.calendar.prev();
            this.calendarLabel = this.calendar.view.title;
        } catch (exceptionVar) {
            console.log('exceptionVar--> ' + exceptionVar)
        }

    }

    dailyViewHandler() {
        try {
            this.calendar.changeView("resourceTimeGridDay");
            this.calendarLabel = this.calendar.view.title;
        } catch (exceptionVar) {
            console.log('exceptionVar--> ' + exceptionVar)
        }
    }


    weeklyViewHandler() {
        try {
            this.calendar.changeView(this.weekView);
            this.calendarLabel = this.calendar.view.title;
        } catch (exceptionVar) {
            console.log('exceptionVar--> ' + exceptionVar)
        }

    }

    monthlyViewHandler() {
        try {
            this.calendar.changeView('dayGridMonth');
            this.calendarLabel = this.calendar.view.title;
        } catch (exceptionVar) {
            console.log('exceptionVar--> ' + exceptionVar)
        }

    }


    listViewHandler() {
        this.calendar.changeView(this.listView);
        this.calendarLabel = this.calendar.view.title;
    }

    today() {
        this.calendar.today();
        this.calendarLabel = this.calendar.view.title;
    }

    refresh() {
        var eventSource = this.calendar.getEventSourceById('custom');
        eventSource.refetch();
    }

    handleScroll(event) {
        console.log("handleScroll");
        event.stopImmediatePropogation();
    }


    handleEventClick(event) {
        let info = event.detail;
        console.log('Event: ' + info.event.title);
        console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
        console.log('View: ' + info.view.type);
        console.log(info);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: info.event.id,
                actionName: 'view',
            },
        });
        // change the border color just for fun
        //info.el.style.borderColor = 'red';

    }

    eventSourceHandler(info, successCallback, failureCallback) {
        getEventsNearbyDynamic({
            startDate: info.start,
            endDate: info.end,
            objectName: objectName,
            titleField: titleField,
            startField: startField,
            endField: endField,
            colorField: colorField,
            allDayField: allDayField,
            additionalFilter: additionalFilter
        })
            .then(result => {
                if (result) {
                    let events = result;
                    let e = [];
                    for (let event in events) {
                        if (event) {
                            e.push({
                                title: events[event][titleField],
                                start: events[event][startField],
                                end: events[event][endField],
                                Id: events[event].Id,
                                id: events[event].Id,
                                color: events[event][colorField],
                                allDay: events[event][allDayField]
                            });
                        }
                    }
                    console.log("num events = ", e.length);
                    successCallback(e);
                }
            })
            .catch(error => {
                console.error("error calling apex controller:", error);
                failureCallback(error);
            });
    }
}