Sabbir Ahmed
1 month ago
Web Application Calendars with FullCalendar: A Beginners Guide in JavaScript
For developing web applications, we often need to use features like calendar frequently. In the calendar we need to add functionalities like adding events, note or making appointments. For these tasks there are many packages out in the web. Today we will be seeing a powerful library called “Full Calendar”. We will see its implementation in javascript.
About Full Calendar
It is easily customizable and it has rich feature set. The calendar is responsive and its integration is quite easy. Also it has a rich documentation.
Lets see an example
Implementing full calendar in javascript is quite easy. Lets start with some simple codes:
In index.html lets add this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar Example</title>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.min.js"></script>
</head>
<body>
<div id='calendar'></div>
<script src="script.js"></script>
</body>
</html>
Here, you can see there is a div with id='calendar', the calendar’s compiled codes will be added under it.
Now, in the script.js file, please add this javascript code:
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
initialDate: '2023-02-01',
timeZone: "UTC",
displayEventEnd: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hourCycle: 'h23'
},
dayMaxEventRows: 3,
eventOrderStrict: false,
events: [
// events from 10pm to 1am on the next day to showcase differnt time renderings in calendar
{
title: "10pm - 1am",
start: "2023-01-28T22:00:00.000Z",
end: "2023-01-29T01:00:00.000Z",
},
{
title: "10pm - 1am",
start: "2023-02-01T22:00:00.000Z",
end: "2023-02-02T01:00:00.000Z",
},
{
title: "10pm - 1am",
start: "2023-03-11T22:00:00.000Z",
end: "2023-03-12T01:00:00.000Z",
},
{
title: "10pm - 1am",
start: "2023-02-18T22:00:00.000Z",
end: "2023-02-26T01:00:00.000Z",
},
],
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,dayGridDay'
},
});
calendar.render();
});
Lets have a bit of explanation on the code above:
initialView - we can control calendar view from here
initialDate - set calendar default date to start from
timeZone - set timezone
eventTimeFormat - we can control how our events should be displayed in time
events - we pass events data with this key, all single event should be passed in a object, where each single object can have event’s start, end and a title to show. You can also add color for the event, with “color” key.
headerToolbar - we can control the display of our calendar’s header toolbar with this key. For example, switching between month, week and day view.
Here is the demo that can be generated from above code:
Please let me know if you have found this article helpful. Feel free to have your comments down here or give a love to this article.
Have a great day.
Comments