Use patternslib Calendar pattern in Plone 6 Classic

Development
1

What's the recommended way to include patternslib Calendar pattern (Calendar — Patterns) in Plone 6 Classic ?

2

I've recently made a calendar implementation here Termine — Zeitschrift für Kultur und Gesellschaft (if you click on "ALLE TERMINE" ... sorry, german only) using the @fullcalendar dependency of patternslib. While pat-calendar comes with a large calendar view implemented, it was a bit tricky to get it work as a small version. Thats why I decided to call the library in my own integration JS like this (snipped):

const FullcalendarIntegration = {
    Calendar: null,
    config: {};

    load_calendar() {
        const cal_el = document.querySelector("#filter-calendar .fc-calendar");
        this.config.initialDate = cal_el.dataset.currentDate;  // We set the current date in markup with `data-currentDate` parameter
        const fc = new this.Calendar(cal_el, this.config);
        fc.render();
    },

    async init() {
        let self = this;

        self.Calendar = (await import("@fullcalendar/core")).Calendar;
        const fcDayGrid = (await import("@fullcalendar/daygrid")).default;
        const fcInteraction = (await import("@fullcalendar/interaction")).default;
        const locale = (await import("@fullcalendar/core/locales/de.js")).default;

        self.config = {
            locale: locale,
            headerToolbar: {
                start: 'title',
                center: '',
                end: 'prev,next',
            },
            initialDate: null,
            contentHeight: 230,
            plugins: [fcDayGrid, fcInteraction],
            dateClick: function (info) {
                // what happens on click on the date
            }
        }

        $(window).on("load patterns-injected", async () => {
            self.load_calendar();
        });
    },
}

FullcalendarIntegration.init();