无法将Google日历事件显示为全日历

Question

This has been asked a lot of times but I can't find any answer that works for me. I followed all the steps on full calendar's site but that doesn't work either. I can see the calendar but no events. I've written the code into a separate javascript file called 'addCalendarEvents.js'
Here is the code and the error I get.
HTML:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />

<script src='jquery-3.1.1.min.js'></script>

<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
<script src='addCalendarEvent.js' type='text/javascript'></script>

Javascript:

    $(document).ready(function() {
    console.log('..');
    $('#calendar').fullCalendar({
         header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
                },
        googleCalendarApiKey: 'AIzaSyAV4rl5GymKTDcHd44U7k48GgGQoeKzsuI',
        eventSources: [{ 
                   googleCalendarApiKey: 'AIzaSyAV4rl5GymKTDcHd44U7k48GgGQoeKzsuI',
                   googleCalendarId: 'vesit.network17@gmail.com',
                   className: 'fc-event-email'
                   }]

        });
    });

Screenshot: errors with the calendar

I'm at a total loss. Any help would be greatly appreciated. Thank you.

Answer 1

The value for the googleCalendarId ...@gmail.com specified by you does not look like a valid calendar ID. That's supposedly the email address that belongs to a google account where the desired calendar exists. Did you have something particular in mind doing so? - As one can have multiple calendars (eg on different topics) in one's google account, a specific ID of the calendar is naturally needed! Any information on a google account becomes irrelevant with the concept of publically made available calendars, right?! Those calendars made publically accessible are like balloons which are attached to a gmail account. They fly high in the air, accessible for everyone. Such balloons are labeled with googleCalendarIds.

More precisely, @group.calendar.google.com should be the last part of the most widely used calendar IDs. You can find the calendar ID in the Google Calendar Interface under 'My calendars' on the left. Then under 'Calendar settings'. One should make sure that the calendar has been made public in order that fullCalendar.js can request the calendar data.

The fullCalendar documentation chapter on Google Calendar gives detailed information on the googleCalendarId and where to find it at Google Calendar Interface. As well, the source code from the gcal.html example in the demos folder from the downloaded fullCalendar zip file gives a good basic example.

Sidenote: You could, in case you only need to refer to one calendar, simplify your code by using

googleCalendarApiKey: '......yourAPI-key......',
events: {
            googleCalendarId: '......@group.calendar.google.com'
        }

Is there a particular reason why you used eventSources, including the statement className 'fc-event-email'? That seems to make things complicated. The approach is not known to me, but it is already more code than usual for the task you described in your question. For a normal Google Calendar API integration into fullCalendar the above mentioned changes are one possible solution to your problem. Hopefully, happy calendar ballooning, Sir!