Fullcalendar javascript tutorial basic

January 12, 2024

Fullcalendar is one of the powerful calendar library in javascript. It also available for frameworks like react, angular, etc. It is a open source library with rich features and custom options. It has features like drag and drop events between time and date, multi-language support, google calendar integration, business hours(can able to set different working hours for each day) and so on. It has 4 kind of views month, week, day and list. We can do lots of customization in fullcalendar as per our need. I have experience in fullcalendar as I have done a complex integration in our software. We can start from the basic one by one.


Initial setup

Download the library from their website or get cdn links and paste in the html code.
Below is the initial code setup for fullcalendar.

<!DOCTYPE html>
<html lang"en">
<head>
	<title>Full calendar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.5/main.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.5/main.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

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

The above code's output will be like


The initialView determines whether it should be month view, week view, day view or list view. The render() function renders the calendar with all the given options.

Types of view

  1. dayGridMonth: A month-based view showing a grid of days with events for each day which we saw in the above image.
  2. timeGridWeek: A week-based view showing a time grid with hourly slots for each day of the week. The time slot duration can be customized using slotDuration keyword.
<script>
	document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'timeGridWeek',
		  slotDuration: '00:20',
		  slotLabelInterval: '00:20',
		  slotMinTime: '09:00',
		  slotMaxTime: '18:00'
        });
        calendar.render();
    });
</script>


  1. timeGridDay: Same as week view but displays a detailed hour-by-hour view of a single day. When it comes to small screen this view will be better for details. For this we have to use the initialView: 'timeGridWeek'

  1. listView: List view is another detailed view unlike day view, here we see only the event name but can show additional details by customizing it. If listView doesn't work then use only list Whenever an event is rendered eventContent is triggered using this you can show additional details in each row other than event name.
document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'list',
		  slotDuration: '00:20',
		  slotLabelInterval: '00:20',
		  slotMinTime: '09:00',
		  slotMaxTime: '18:00',
		  eventContent: function (arg) {
			let italicEl = document.createElement('div');
            if (arg.view.type == 'list') {
                italicEl.style.fontSize = '13px';
                italicEl.style.marginLeft = '15px';
                italicEl.innerHTML = arg.event.title + "&emsp;&emsp;&emsp;" + "Tamil Festival";
                let arrayOfDomNodes = [italicEl]
                return { domNodes: arrayOfDomNodes }
            }
		  }
        });
		calendar.addEvent({
			title: 'Pongal',
			start: '2024-01-13T15:00:00',
			end: '2024-01-13T16:00:00'
		});
        calendar.render();
    });


The below image is customized with eventContent function.


Add events

    For adding event we can use calendar.addEvents({}), inside the array id, title, start and end are mandatory fields to show a event in correct position, id is not mandatory but it will be useful when coming  additional fields can also be added which we can use to show other details to the user. Adding id can be easy to delete the specific event.

calendar.addEvent({
id: 1,
title: 'Pongal',
start: '2024-01-13T15:00:00',
end: '2024-01-13T16:00:00'
});

Fetch events from server

    Fullcalendar has a inbuilt setup to fetch events from server, there using ajax we have to send the from and to date and other details in form data to get the events between the date range. The response should be in json format.

events: function (start, successCallback, callback) {
			var data = new FormData();
            data.append('start', start.startStr);
            data.append('end', start.endStr);
			$.ajax({
                url: '/fetchevents',
                type: 'POST',
                contentType: false,
                data: data,
                processData: false
			}).success(function (data) {
				successCallback(data)
			})
        }
The successCallback function renders the events to the events as it contains title, startdate and enddate with time. In the success function we also can iterate the data and add any logic and then successCallback. We can also have multiple events calls to get events from various sources.

Multiple event calls

eventSources: [
	events: function (start, successCallback, callback) {
		$.ajax({
			url: '/fetchevents1',
			    //success function
		})
	},
	events: function (start, successCallback, callback) {
		$.ajax({
			url: '/fetchevents1',
			    //success function
		})
	}
 ]

Show event details in tooltip

     In slot title we can't able to see all the needed details. Consider it as a appointment scheduler where there will be many slots and it contains appointments and the title may be a event or person's name or anything beside that it is hard to see everything in the slot, so we show other details in the tooltip. Let me give an example.

eventDidMount: function (info) {
    var tooltip = new Tooltip(info.el, {
        title: buildToolTip(info),
        placement: 'top',
        trigger: 'hover',
        container: 'body'
    });
}

function buildToolTip(info) {
    return "<div>Name: "  + info.event.title + "</div><div>Age: " + info.event.extendedProps.age + "</div><div>Mobile:" + info.event.extendedProps.mobile + "</div>"
}
eventDidMount triggers for each event mount in the slot, so using that we build the tooltip of jquery. id, title, start and end are events inbuilt properties, to use additional properties use extendedProps. For tooltip use tooltip and popper libraries.



Header Toolbar

    Header toolbar is the navigation part of the calendar, here we choose the view we want, navigate to next week, day or month. We can customize the position and have the view we want.

headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: "dayGridMonth,timeGridWeek,timeGridDay,list"
}

Below is the output

These are the basic concepts in fullcalendar, it has lot more features I will post once I complete it. If any doubts or mistakes found feel free to comment.

Post a Comment

0 Comments