Full calendar Hot Control

full-calendar-hot.js

<script>
    oc.registerControl('full-calendar', class extends oc.ControlBase {
        connect() {
            this.calendar = new FullCalendar.Calendar(this.element, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: null,
                },
                initialView: window.innerWidth < 1000 ? 'listWeek' : 'dayGridMonth',
                locale: '<?= $locale ?>',
                contentHeight: 'calc(100vh - 200px)',
                weekNumbers: true,
                loading: function (isLoading) {
                    if (isLoading) {
                        document.getElementById('r-calendar').style.display = 'none';
                        oc.progressBar.show()
                    } else {
                        oc.progressBar.hide()
                        document.getElementById('r-calendar').style.display = 'block';
                    }
                },
                events: function (eventInfo, successCallback) {
                    oc.request(this.element, 'onLoadHolidays', {
                        data: {
                            start: eventInfo.start.toDateString(),
                            end: eventInfo.end.toDateString()
                        },
                        success: function (events) {
                            successCallback(events);
                        }
                    });
                },
                windowResize: function (arg) {
                    if (window.innerWidth < 1000) {
                        this.changeView('listWeek');
                    } else {
                        this.changeView('dayGridMonth');
                    }
                }
            });

            this.calendar.render();
        }

        disconnect() {
            this.calendar.destroy();
            this.calendar = null;
        }
    });

    addEventListener('render', function () {
        document.querySelectorAll('#r-calendar:not([data-control~="full-calendar"]').forEach((element) => {
            if (element.dataset.control) {
                element.dataset.control = element.dataset.control + ' full-calendar';
            }
            else {
                element.dataset.control = 'full-calendar';
            }
        });
    });
</script>