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