Calendar

Use an advanced integration of FullCalendar to show, edit and delete events

Getting started

Before using the calendar plugin you need to add the following script files before the end of the body tag:

<script src="@@path/vendor/fullcalendar/main.min.js"></script>

You will also need to include the following stylesheet file before the end of the head tag:

<link type="text/css" href="@@path/vendor/fullcalendar/main.min.css" rel="stylesheet">

Initializing the calendar

In your html file you need to create a div tag with an id attribute:

<div id="calendar" class="p-4"></div>

After that in your Javascript files you’ll need to initialize the calendar like this:

var calendarEl = d.getElementById('calendar');

var events = [
    {
        id: 1,
        title: 'Call with Jane',
        start: '2020-11-18',
        end: '2020-11-19',
        className: 'bg-red'
    },
    
    {
        id: 2,
        title: 'Dinner meeting',
        start: '2020-11-21',
        end: '2020-11-22',
        className: 'bg-orange'
    },

    // ...
    
    {
        id: 10,
        title: 'Cyber Week',
        start: '2020-12-02',
        end: '2020-12-03',
        className: 'bg-red'
    }
];

var addNewEventModalEl = d.getElementById('modal-new-event');
var addNewEventModal = new bootstrap.Modal(addNewEventModalEl);
var newEventTitleInput = d.getElementById('eventTitle');
var newEventStartDatepicker = new Datepicker(d.getElementById('dateStart'), { buttonClass: 'btn' });
var newEventEndDatepicker = new Datepicker(d.getElementById('dateEnd'), { buttonClass: 'btn' });

var editEventModalEl = d.getElementById('modal-edit-event');
var editEventModal = new bootstrap.Modal(editEventModalEl);
var editEventTitleInput = d.getElementById('eventTitleEdit');
var editEventStartDatepicker = new Datepicker(d.getElementById('dateStartEdit'), { buttonClass: 'btn' });
var editEventEndDatepicker = new Datepicker(d.getElementById('dateEndEdit'), { buttonClass: 'btn' });

// current id selection
var currentId = null;

var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    initialView: 'dayGridMonth',
    themeSystem: 'bootstrap',
    initialDate: '2020-12-01',
    editable: true,
    events: events,
    dateClick: function(d) {
        addNewEventModal.show();
        newEventTitleInput.value = '';
        newEventStartDatepicker.setDate(d.date);
        newEventEndDatepicker.setDate(d.date.setDate(d.date.getDate() + 1));

        addNewEventModalEl.addEventListener('shown.bs.modal', function () {
            newEventTitleInput.focus();
        });
    },
    eventClick: function(info, element) {
        // set current id
        currentId = info.event.id;
        editEventTitleInput.value = info.event.title;
        editEventStartDatepicker.setDate(info.event.start);
        editEventEndDatepicker.setDate(info.event.end ? info.event.end : info.event.start);

        editEventModal.show();
        editEventModalEl.addEventListener('shown.bs.modal', function () {
            editEventTitleInput.focus();
        });
    }
});
calendar.render();

d.getElementById('addNewEventForm').addEventListener('submit', function (event) {
    event.preventDefault();
    calendar.addEvent({
        id: Math.random() * 10000, // this should be a unique id from your back-end or API
        title: newEventTitleInput.value,
        start: moment(newEventStartDatepicker.getDate()).format('YYYY-MM-DD'),
        end: moment(newEventEndDatepicker.getDate()).format('YYYY-MM-DD'),
        className: 'bg-blue',
        dragabble: true
    });
    addNewEventModal.hide();
});

d.getElementById('editEventForm').addEventListener('submit', function (event) {
    event.preventDefault();
    var editEvent = calendar.getEventById(currentId);
    var startDate = moment(editEventStartDatepicker.getDate()).format('YYYY-MM-DD');
    var endDate = moment(editEventEndDatepicker.getDate()).format('YYYY-MM-DD')

    editEvent.setProp('title', editEventTitleInput.value);
    editEvent.setStart(startDate);
    editEvent.setEnd(endDate);
    editEventModal.hide();
});

d.getElementById('deleteEvent').addEventListener('click', function () {
    swalWithBootstrapButtons.fire({
        icon: 'error',
        title: 'Confirm deletion',
        text: 'Are you sure you want to delete this event?',
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: 'No, cancel!',
        }).then(function(result) {
            if (result.value) {
            swalWithBootstrapButtons.fire(
                'Deleted!',
                'The event has been deleted.',
                'success'
            );
            calendar.getEventById(currentId).remove();
            } else if (result.dismiss === Swal.DismissReason.cancel) {
            editEventModal.hide();
            }
        })
});

This is a lot of code to start with, but this also contains our custom vanilla JS code with which you can add, edit or delete items from the calendar.

Adding an event

If you would like to update the type of data that you want to have when adding an event this is the modal HTML markup and event listener where the item is actually being added to the calendar object:

<div class="modal fade" id="modal-new-event" tabindex="-1" role="dialog" aria-labelledby="modal-new-event" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <form id="addNewEventForm" class="modal-content">
            <div class="modal-body">
                <div class="mb-4">
                    <label for="eventTitle">Event title</label>
                    <input type="text" class="form-control" id="eventTitle" required>
                </div>
                <div class="row">
                    <div class="col-12 col-lg-6">
                        <div class="mb-4">
                            <label for="dateStart">Select start date</label>
                            <div class="input-group">
                                <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                                <input data-datepicker="" class="form-control" id="dateStart" type="text" placeholder="dd/mm/yyyy" required>                                               
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="mb-2">
                            <label for="dateEnd">Select end date</label>
                            <div class="input-group">
                                <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                                <input data-datepicker="" class="form-control" id="dateEnd" type="text" placeholder="dd/mm/yyyy" required>                                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="addNewEvent">Add new event</button>
                <button type="button" class="btn btn-link text-gray ml-auto" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>
</div>

Javascript

d.getElementById('addNewEventForm').addEventListener('submit', function (event) {
    event.preventDefault();
    calendar.addEvent({
        id: Math.random() * 10000, // this should be a unique id from your back-end or API
        title: newEventTitleInput.value,
        start: moment(newEventStartDatepicker.getDate()).format('YYYY-MM-DD'),
        end: moment(newEventEndDatepicker.getDate()).format('YYYY-MM-DD'),
        className: 'bg-blue',
        dragabble: true
    });
    addNewEventModal.hide();
});

Editing an event

If you would like to update the type of data that you want to have when editing an event this is the modal HTML markup and event listener where the item is actually being added to the calendar object:

<div class="modal fade" id="modal-edit-event" tabindex="-1" role="dialog" aria-labelledby="modal-edit-event" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <form id="editEventForm" class="modal-content">
            <div class="modal-body">
                <div class="mb-4">
                    <label for="eventTitleEdit">Event title</label>
                    <input type="text" class="form-control" id="eventTitleEdit" required>
                </div>
                <div class="row">
                    <div class="col-12 col-lg-6">
                        <div class="">
                            <label for="dateStartEdit">Select start date</label>
                            <div class="input-group">
                                <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                                <input data-datepicker="" class="form-control" id="dateStartEdit" type="text" placeholder="dd/mm/yyyy" required>                                               
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="mb-2">
                            <label for="dateEndEdit">Select end date</label>
                            <div class="input-group">
                                <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                                <input data-datepicker="" class="form-control" id="dateEndEdit" type="text" placeholder="dd/mm/yyyy" required>                                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary mr-2" id="editEvent">Update event</button>
                <button type="submit" class="btn btn-danger" id="deleteEvent">Delete event</button>
                <button type="button" class="btn btn-link text-gray ml-auto" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>
</div>

Javascript

d.getElementById('editEventForm').addEventListener('submit', function (event) {
    event.preventDefault();
    var editEvent = calendar.getEventById(currentId);
    var startDate = moment(editEventStartDatepicker.getDate()).format('YYYY-MM-DD');
    var endDate = moment(editEventEndDatepicker.getDate()).format('YYYY-MM-DD')

    editEvent.setProp('title', editEventTitleInput.value);
    editEvent.setStart(startDate);
    editEvent.setEnd(endDate);
    editEventModal.hide();
});

Deleting an event

The following javascript code is where you can update data when deleting an event from the calendar:

d.getElementById('deleteEvent').addEventListener('click', function () {
    swalWithBootstrapButtons.fire({
        icon: 'error',
        title: 'Confirm deletion',
        text: 'Are you sure you want to delete this event?',
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: 'No, cancel!',
        }).then(function(result) {
            if (result.value) {
            swalWithBootstrapButtons.fire(
                'Deleted!',
                'The event has been deleted.',
                'success'
            );
            calendar.getEventById(currentId).remove();
            } else if (result.dismiss === Swal.DismissReason.cancel) {
            editEventModal.hide();
            }
        })
});

The calendar plugin is quite complex and there are a lot more options that you can use when working with it. We recommend you to browse the official FullCalendar.io documentation from their website.