Calendar
FullCalendar 4 is a JavaScript event calendar. It's fully customizable and open source.
Basic example
Basic FullCalendar example with least options enabled.

<div id="calendar"></div>
if($('#widget-calendar-body')[0]) {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
editable: true,
});
calendar.render();
}
In order to get the complete functionality as shown in the demo, please refer the 'Javascript' file listed in the table below.
Files required:
Type | Files |
---|---|
Custom SCSS | /src/scss/inc/vendor-overrides/_fullcalendar.scss |
Javascript | /src/js/vendors/fullcalendar.js |
Library |
/resources/vendors/fullcalendar/core/main.min.css
/resources/vendors/fullcalendar/daygrid/main.min.js
/resources/vendors/fullcalendar/interaction/main.min.js
|