CODEWITHSUNDEEP
google-apifullcalendar
sixstringsteph
sixstringsteph

Reputation: 27

Can't get Google Calendar to populate FullCalendar

I'm new to programming so please excuse the improper terminology, but I was able to get a basic FullCalendar added to my website and would like to populate the calendar based on one of my public Google Calendars. I followed the steps on FullCalendar's website for setting up Google Calendar but I still just see a blank calendar, even though there are events on the public Google Calendar. The only step I was unsure of when setting things up was the Authorized JavaScript Origins section of setting up the Google API. I am using a GitHub pages site and it would not accept the full path name for my site so I just put the main hub portion (https://username.github.io) in this Authorized JavaScript Origins field. Is this incorrect? What needs to go in this path if I am using the FullCalendar on a site with the following type of URL: https://stephmorgan.github.io/repository/ ?

<head>
    <link rel="stylesheet" href="fullcalendar/fullcalendar.css" />
    <script src="lib/jquery.min.js"></script>
    <script src="lib/moment.min.js"></script>
    <script src="fullcalendar/fullcalendar.js"></script>
    <script src="fullcalendar/gcal.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
      $("#calendar").fullCalendar({
        googleCalendarApiKey: "<API-KEY>",
        events: {
            googleCalendarId: "[email protected]"
            className: "gcal-event" 
            }
        });
    });
    </script>
</head>

<body>
<div id="calendar"></div>
</body>

Upvotes: 1

Views: 930

Answers (1)

ADyson
ADyson

Reputation: 62128

There are several problems:

1) googleCalendarId: "Calendar ID: [email protected]" should be googleCalendarId: "[email protected]", as per the example at https://fullcalendar.io/docs/google_calendar. It thinks "Calendar ID: " is part of the ID, which obviously it isn't, and Google won't recognise it.

2) The same issue with the API Key - remove the < and > from the ends of the string.

3) It sounds like you chose the wrong kind of credentials - the API key config does not contain a section from JavaScript origins etc. You must choose to create an API Key (sometimes called a Browser Key), and not Oauth Client ID or Service Account.

Upvotes: 1

Related Questions