Learning FullCalendar Part 1: Must-Knows to Get Started

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

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.
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

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

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

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

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

This page is a must-read.
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

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

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

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.