> For the complete documentation index, see [llms.txt](https://aeudoc.gitbook.io/developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aeudoc.gitbook.io/developer/presentation/jquery-plugin/calendar.md).

# 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:

<figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FngzQYhlZkBHX0xW2l4kj%2Fimage.png?alt=media&amp;token=bab6e841-4639-4c51-a4ee-f1f0bbbb8ffe" alt=""><figcaption></figcaption></figure>

## 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: