Fullcalendar - Google Calendar Events Not Displaying - fullcalendar

Question

Reference: fullcalendar and gcal both v.3.9.0, jquery v.3.3.1, moment v. latest
I'm trying to get a test calendar running to display multiple Google Calendars, but so far no events are being displayed. I've followed the documentation on the fullcalendar.io website but have had no success so far. The following code renders the calendar but does not display the Google Calendar events:
$(document).ready(function() {
function CalendarSource(label, googleCalendarId, name) {
this.label = label;
this.googleCalendarId = googleCalendarId;
this.name = name;
}
// Initialise the main calendar instance
$('#fullcalendar-instance').fullCalendar({
googleCalendarApiKey: 'MyAPIkey',
eventSources: [
{
googleCalendarId: 'gCalID-1',
color: 'green', // an option!
textColor: 'black', // an option!
className: 'my-event-1'
},
{
googleCalendarId: 'gCalID-2',
color: 'blue', // an option!
textColor: 'black', // an option!
className: 'my-event-2'
},
{
googleCalendarId: 'gCalID-3',
color: 'orange', // an option!
textColor: 'black', // an option!
className: 'my-event-3'
}
],
header: {
left: 'prev,next today',
center: 'title',
right: 'prevYear,nextYear',
},
titleFormat: 'MMM YYYY',
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
bootstrapFontAwesome: {
close: 'fa-times',
prev: 'fa-angle-left',
next: 'fa-angle-right',
prevYear: 'fa-angle-double-left',
nextYear: 'fa-angle-double-right'
},
timezone: 'Europe/London',
defaultView: 'month',
themeSystem: 'bootstrap4'
})
});
I would be grateful if someone could point out where I going wrong.

Answer 1

I rebuilt the page from scratch based upon the following demo:
http://started%20from%20sratch%20using%20the%20fullcalendar.io/releases/fullcalendar/3.9.0/demos/gcal.html