Skip to content

Instantly share code, notes, and snippets.

@mplodowski
Created October 20, 2023 11:51
Show Gist options
  • Save mplodowski/014f804211c9de621c2cda8a4e7e80e6 to your computer and use it in GitHub Desktop.
Save mplodowski/014f804211c9de621c2cda8a4e7e80e6 to your computer and use it in GitHub Desktop.
Full calendar Hot Control
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment