Calendar

General information

FullCalendar is a plug-in for the jQuery library that provides a calendar with various interactive features whose layout and functionalities can be customized.

A typical calendar in our applications looks like this:

Installation

1. Download latest version of FullCalendar from the following link: https://github.com/fullcalendar/fullcalendar/releases
2. Store the downloaded files in the folder "Plugins" > "fullcalendar" (Create the file if it does not exist yet)

3. Add the following lines in the "Layout.cshtml" file

<link rel="stylesheet" href="~/Plugins/fullcalend
ar/main.css" />

<script type="text/javascript" src="~/Plugins/fullcalendar/main.min.js"></script>

How to use

The simplest form of the calendar is implemented in the following way:

<div id="calendar-id"></div>

<script>

    $(document).ready(function () {

        var calendarEl = document.getElementById('calendar-id');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            ...
        });

    });

</script>

Additional features can be included within the "{ ... }" brackets. In the following, a couple of features are described.

Examples

Example 1: Grid

The following code adds a grid to the Calendar:

initialView: 'dayGridMonth'

Example 2: Toolbar

The following code lets you add features in the header of the calendar:

headerToolbar: {
    left: 'prev',
    center: 'title',
    right: 'next'
}

This particular code adds a "Previous" Button in the left of the header, a "Next" Button in the right of the header and a Title in the center of the header. You can also change the positions of the features by adding them in the line of the respective position.

Example 3: Multiple features

Multiple features are separated by a comma:

initialView: 'dayGridMonth',
headerToolbar: {
    left: 'prev',
    center: 'title',
    right: 'next'
}

The above code lets you add both a grid as well as features in the header of the calendar: