There are several ways to display a calendar on your site, but I often use fullcalender.js.
It is very useful because it can display the contents of fullcalendar google calendar as it is.
The other day, I was given a job to display multiple googole calendars in this fullcalender, and I actually embedded them, but I struggled to figure out how to import multiple calendars using Google API v3.
I’m sure there are many people besides me who struggle with this.
So, in this article, I would like to explain “How to display multiple google calendars in fullcalendar” in an easy-to-understand manner.
We hope you find it useful.
The installation method is based on the explanation on the original site.
Please check the following first.
<link rel='stylesheet' href='css/fullcalendar.css' type='text/css' media='all' />
Write the calendar where you want it to appear.
We will not explain how to get the Google API.
Configure the settings here to load multiple google calendars.
(placed in html)
// Set the API key.
googleCalendarApiKey: 'Here is the API key you got.',
googleCalendarId: 'Calendar ID1',
googleCalendarId: 'Calendar ID2',
You can find the calendar ID in “Calendar Settings” -> “Calendar Address” of the google calendar you want to display (must be shared and set to public).
By specifying the class in “className:”, you can also set the design in css.