Creating a Custom Calendar Using FullCalendar
If your organization hosts or sponsors events, then a full-featured calendar on your website often makes perfect sense.
It promotes the work of your organization while increasing engagement from your users, and providing a one-stop shop for everything happening for your community members.
In the past, we’ve talked about The Events Calendar plugin, one of the most popular – and powerful – WordPress plugins. It comes with many built features, as well as ways to extend its functionality by checking for venue conflicts, implementing tickets and RSVPs for recurring events or hiding past events from WordPress search.
Given its extensive popularity, one of the drawbacks of the The Events Calendar is that every time an update is released, it tends to break some custom styles or functionality. It can also add some extra overhead to your website, possibly affecting site speed and performance.
So if you want the functionality of calendar, but want to keep it light weight, what options do you have?
One possibility is FullCalendar, a powerful open source JavaScript library for creating customizable calendars for websites and web applications. It bills itself as “the most powerful JavaScript calendar” that “can do just about anything”.
Here’s what it looks like, from one of their demos:
If you’d like to try out FullCalendar, here’s how you can make it happen.
1. Enqueue the FullCalendar Script
The first thing you need to do is include the JavaScript for the calendar in the <head> of your website to initialize the calendar.
Use this code:
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>2. Add the HTML
Once the JavaScript is added in the <head>, you can access the FullCalendar class. Next, add a <div> with a unique ID where the calendar should display. For this example, let’s give our <div> an id of “calendar”.
<div id="calendar"></div>
3. Render the Calendar
Next, add this jQuery code to render the calendar.
$(document).ready(function(){
var calendarEl = $('#calendar')[0];
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
In this jQuery, we’re assigning the DOM object of our calendar <div> to the calendarEl variable. Then, we create a new instance of the FullCalendar.Calendar class. This class accepts two arguments: the first tells FullCalendar where to render the calendar, and the second is an object that contains the configurations for the calendar.
In this object, we’re assigning the dayGridMonth value to the initialView option, saying that we want by default to display the month view of the calendar. This new instance is then assigned to the calendar variable, which is displayed using the render() function.
4. Add Events to the Calendar
Now that we’re displaying a calendar, we need to add some events!
Events can be provided as an array, a JSON feed or using the addEvent method. All of the available properties for the events can be found here. Here’s an example of the full jQuery code, using an array to provide events for the calendar.
$(document).ready(function(){
var calendarEl = $('#calendar')[0];
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
title : 'First Event',
start : '2026-01-01'
},
{
title : 'Second Event',
start : '2026-01-05',
end : '2026-01-07'
},
{
title : 'Third Event',
start : '2026-01-09T12:30:00',
allDay : false
}
]
});
calendar.render();
});
If you’re using WordPress to manage your events, create a loop that outputs the relevant data for each event, and you’ll be all set.
FullCalendar is a pretty powerful plugin that offers some additional functionality and, right now, we’ve only scratched the surface. In the future, we’ll explore more about the different features and ways to add events to the calendar.
If you need help implementing a custom calendar or for any web development or digital marketing needs, reach out to us and we’d be more than happy to assist you.
