Calendar

<div class="d-flex justify-content-end mb-20">
    <button class="btn btn-brand" type="button">Add Event</button>
</div>
<div class="rui-calendar rui-calendar-navs"></div>

const $calendar = $('.rui-calendar');
const events = [
    {
        id: 'a',
        title: 'Training',
        start: 'your_dateT09:00:00',
        allDay: false,
        className: 'fc-event-brand',
    },
    {
        id: 'b',
        title: 'Repetition',
        start: 'your_dateT11:00:00',
        allDay: false,
        className: 'fc-event-primary',
    },
    {
        id: 'c',
        title: 'Pick up the parcel',
        start: 'your_dateT13:00:00',
        allDay: false,
        className: 'fc-event-warning',
    },
    {
        id: 'd',
        title: 'Film',
        start: 'your_dateT16:00:00',
        allDay: false,
        className: 'fc-event-success',
    },
    {
        id: 'e',
        title: 'Stroll',
        start: 'your_dateT19:00:00',
        allDay: false,
    },
    {
        id: 'f',
        title: 'Meeting',
        start: 'your_date',
        className: 'fc-event-danger',
    },
];
const optionsNavs = {
    initialView: 'dayGridMonth',
    headerToolbar: {
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,listWeek',
    },
    events: events,
};

$('.rui-calendar-navs').each( function() {
    new FullCalendar.Calendar(this, optionsNavs).render();
} );