FullCalendar is a popular JavaScript library for creating customizable and interactive calendars on the web. It provides powerful features for displaying event data in a visually appealing and user-friendly way, making it ideal for applications that need event scheduling, appointment booking, or any functionality involving date management. This guide provides a step-by-step process for setting up FullCalendar on your web page.

FullCalendar is a feature-rich JavaScript library that allows developers to embed a calendar UI component in web applications. It integrates seamlessly with popular JavaScript frameworks, including React, Vue, and Angular, and can also be used with vanilla JavaScript. FullCalendar is open-source, which makes it accessible and adaptable for diverse projects.

Key Features:

• Flexible Views: Supports different calendar views, such as month, week, day, list, and customizable timeline views.
• Event Management: Allows developers to add, edit, and delete events dynamically.
• Customizable Appearance: Offers extensive styling options for adjusting colors, fonts, and layout.
• Drag-and-Drop Support: Includes drag-and-drop functionality for easy event rescheduling.
• Timezone Support: Manages events across different time zones, making it perfect for international applications.
• Compatibility: Works with various data sources, including JSON, Google Calendar, and API-based event feeds.

FullCalendar Setup

FullCalendar can be installed using npm, CDN, or by directly downloading the library files.

Now, I will share by adding direct links.

Add the following FullCalendar link in your html file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

Once you've added FullCalendar link, the second step is, create a <div> element by giving id - "calendar"

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

The next step is to initialize FullCalendar, so, create a <script> tag and add the following codes

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl);

        calendar.render();
    });
</script>

Now, basic FullCalendar is setup succesfully. Now , if you run your webpage, you can see like this

But to make the calendar more effective, we can add header toolbar buttons for different views

Update the codes with the following codes

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {  
            
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

            },
            events: [
                { id: 1, title: "Event 1", start: "2024-11-01" },
                { id: 2, title: "Event 2", start: "2024-11-03" },
                { id: 3, title: "Event 3", start: "2024-11-07" },
            ],     
        });
        calendar.render();
    });
</script>

That "headerToolbar" will display that buttons at the top of the calendar and we can switch to week view, day view, list view.

With that "events", it will create events in given days in calendar.

These are only some basic customizations of the calendar.

We can customize many thing in FullCalendar. 

With these customizations, the calendar will look like this 

Since FullCalendar is multilingual support, we can use this calendar in many language. For example, if we want to use this Calendar in Thai language, we have to customize the codes as

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, { 
            locale : 'th', 
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

            },
            events: [
                { id: 1, title: "Event 1", start: "2024-11-01" },
                { id: 2, title: "Event 2", start: "2024-11-03" },
                { id: 3, title: "Event 3", start: "2024-11-07" },
            ],     
        });
        calendar.render();
    });
</script>

By adding the language tag value in "locale", the calendar changes to that language. Now the result is

Since the header toolbar buttons are customizations of the calendar. So, it will not change to Thai langauge. We have to create custom values for that header toolbar buttons. But the month name, year number, week name are changed to Thai langauge. We don't need to create everything for that. We can easily use that locale tag.

FullCalendar is a flexible, versatile solution for adding calendar functionality to web applications. With support for drag-and-drop events, custom styling, and integration with external data sources, it offers the features needed for a wide range of applications, from simple scheduling to comprehensive event management. Its adaptability across different frameworks makes it a valuable tool for modern web developers seeking to create interactive, dynamic calendar experiences.