Full calendar Hot Control

full-calendar-hot.js

<script>
    addEventListener('page:loaded', function () {
        if (!document.getElementById('r-calendar')) {
            return;
        }

        oc.registerControl('full-calendar', class extends oc.ControlBase {
            init() {
                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('#r-calendar', '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;
            }
        });
    });
</script>