Learning FullCalendar Part 1: Must-Knows to Get Started
Tags: laravel, php, javascript, beginners
Published: 2023-10-08 00:14:13

My task was to integrate FullCalendar into our project. It wasn't just a matter of following the advanced sample code in the documentation. It also involved extensive customization. Besides, we are using Laravel version 10, Livewire version 3 (released in July 2023), and FullCalendar version 6 (released in September 2023!).

So, I'd like to share what I've learned through this project. This will be a series of articles. Today's article covers the basics of FullCalendar, which I believe are essential to know when getting started.

**FullCalendar**
FullCalendar is a JavaScript library to create a flexible, draggable event calendar. After setting up, `<div id='calendar'></div>` simple tag renders a full-sized calendar.

Most of the code here is sourced from the official documentation, to which I provide a link. Some code uses 'var' declarations, while others use 'let', and I have kept them as they are in the original examples.
I highly recommend you visit the official documentation and get familiar with where you can find the resources.

[FullCalendar](https://fullcalendar.io/docs)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/endmcqa38olnsf7ifpl1.jpeg)

**Initialization**
There are three ways to use or bundle FullCalendar:

1. Download: fullcalendar-6.1.9.zip
2. CDN: jsdelivr
3. NPM: npm install fullcalendar

I'll choose to install it via npm.

```
<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var calendarEl = document.getElementById('calendar'); 
    var calendar = new FullCalendar.Calendar(calendarEl, { 
        initialView: 'dayGridMonth' 
    }); 
    calendar.render(); 
}); 
</script>
```

This code is available in the official documentation, which you can find [here](https://fullcalendar.io/docs/initialize-globals).
This is written in vanilla JavaScript. Here, we retrieve the element with the `id=calendar` from the DOM using `document.getElementById`, assign it to `calendarEl`, and then create an instance of the FullCalendar library's 'Calendar' class, which we named `calendar`.

**Overall Display**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khz1zh2d5gc9wguey2xu.jpeg)

We can set up or customize the display such as the buttons in the toolbar, colors, or size.

Example: I only need the year and month, a previous button, and a next button, so my code will be like this:

```
let calendar = new FullCalendar.Calendar(calendarEl, {
...
    headerToolbar: {
        center: 'title', // Year and Month
        left: 'prev',
        right: 'next'
    },
});
```

**Views**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjjqu9pixx5yapphjexp.jpeg)

We can configure various aspects of views, including four types: monthly, weekly, daily calendars, and a list view. Additionally, we have control over the initial view and the duration or range to be displayed.
Check [here](https://fullcalendar.io/docs/view-specific-options) for more details.

Example: I only need to display a monthly calendar, so in my case:

```
let calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
...
});
```

**Date & Time**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b33hxfg1o2ye10drt4w.jpeg)

In this section, we can configure days and times. This is one key aspect that adds dynamism to the calendar, offering various settings, callbacks, and methods.

Example:
Setting

```
selectable: true   // Highlight days by clicking
```

Callback

```
dateClick: function(info) {
    alert('Clicked on: ' + info.dateStr);
}
```

Method

```
calendar.select( start, [ end ] );
```

[DOC](https://fullcalendar.io/docs/date-clicking-selecting)

**Events**
Events are represented as the blue elements on the calendar.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uowzvzcyj7xqucc20a1.jpeg)

This page is a must-read.
[Event Object](https://fullcalendar.io/docs/event-object)

_Event Model_
Events in FullCalendar can be created, edited, dragged, and deleted by users, which is a primary feature of a calendar application. When defining event data, you specify it as a JavaScript object with various properties.

```
events: [ 
    { // this object will be "parsed" into an Event Object 
        title: 'The Title', // a property! 
        start: '2018-09-01', // a property! 
        end: '2018-09-02' // a property! 
    }
 ]
```
[DOC: Event Parsing](https://fullcalendar.io/docs/event-parsing)

Event data is stored in an object and it is read-only.

```
var calendar = new Calendar(calendarEl, { 
    timeZone: 'UTC', 
    events: [ { 
        id: 'a', title: 
        'my event', 
        start: '2018-09-01' } 
        ] 
    }) 
var event = calendar.getEventById('a') // an event object! 
var start = event.start // a property (a Date object) console.log(start.toISOString()) // "2018-09-01T00:00:00.000Z"
```
[DOC: Event Object](https://fullcalendar.io/docs/event-object)

For further information on event settings, callbacks, and methods, please refer to the official documentation.

**CSS**
You have the flexibility to customize the CSS. To view the available class names, you can refer to the following GitHub link.
[GitHub](https://github.com/fullcalendar/fullcalendar/blob/main/packages/core/src/styles/vars.css)

When customizing CSS for my app, I used browser inspection tools.

I found the learning process confusing, and I invested a significant amount of time reading documentation and blog articles, reviewing code examples, and watching tutorial videos. As I mentioned earlier, due to recent updates, there was limited information available. If I were to start learning from scratch, I would begin with the resources mentioned above. In my next blog post, I'll detail how I applied this knowledge to our project.