Reputation: 27
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
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