How to display multiple Google Calendar in fullcalendar

There are several ways to display a calendar on your site, but I often use fullcalender.js.
http://fullcalendar.io/
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.

【heder】

<link rel='stylesheet' href='css/fullcalendar.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='js/moment.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript' src='js/gcal.js'></script>

【body】
Write the calendar where you want it to appear.

<div class="calendar1"></div>

1	<div class="calendar1"></div>

【Option settings】
We will not explain how to get the Google API.
Configure the settings here to load multiple google calendars.
(placed in html)

<script>
$(document).ready(function() {
	
　　　　　$('.calendar1').fullCalendar(
		{

			// Set the API key.
			googleCalendarApiKey: 'Here is the API key you got.',
		
			 eventSources: [
            {
				//Schedule 1
                googleCalendarId: 'Calendar ID1',
		className: 'calendar_1'
				
            },
            {
				//Schedule 2
                googleCalendarId: 'Calendar ID2',
                className: 'calendar_2'
            }
        ],
			},
		});
		
	});
	
</script>

$(document).ready(function() {

　　　　　$('.calendar1').fullCalendar(

{

// Set the API key.

googleCalendarApiKey: 'Here is the API key you got.',

eventSources: [

{

//Schedule 1

googleCalendarId: 'Calendar ID1',

className: 'calendar_1'

{

//Schedule 2

googleCalendarId: 'Calendar ID2',

className: 'calendar_2'

}

});

</script>

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.