Showing you events from your Google Calendar in Squarespace might be a difficult task using Google API but using a plugin for that is getting the task done much faster. Full Calendar is a javascript plugin that takes the data from your calendar and reconstructs the visual calendar with that events data.
In order to be able to add your calendar to the Full calendar plugin you need a google api key. Google provides documentation about how to set up a Google Api key : https://support.google.com/googleapi/answer/6158862?hl=en
The Full Calendar plugin works with the Google API to fetch data from your Google Calendar. Visit their website to download the plugin JS file and CSS file or you could just link them from a CDN
As you can see there is a placeholder div element with the id google-calendar where all the calendar will be generated by the plugin.
The calendarEl variable will be the placeholder well the calendar will be inserted and the calendar variable will represent the FullCalendar instance of our calendar. As you can notice the toolbar buttons in the head can be customized reordering the previous and next buttons and title however you like it.
The googleCalendarApiKey is the api key that I mentioned above that you need to get from google API. The eventSources property will hold all the events that we have already created in our google calendar. Now we just reference it by id in the googleCalendarId property and we can also add a class name on the event element of that certain event category to mark the items of same category. This means that the event items in the calendar of the id someGoogleEventId for example will have the filmography-events class and you can style them with same color, font style or with other styles.
Maybe you ask, how could you get the event Id from your calendar? Well, you should go to Google Calendar and on the left at one of the event’s category you have 3 vertical dots you click on it and a menu opens where you have the settings option:
At the integrate section of your calendar you will have the calendar id:
Each event as separate calendar with a calendar ID makes the above configuration possible. Also it is important to have the calendar view to be on public otherwise you will not be able to display it on your website.
This next piece of code makes the browser to display only the next events avoiding the past events.
So how will the calendar look like on my page?
Show your event details in a popup
To accomplish the popup with details in our way we need to construct the html and style it with our own css:
After we have all the html in a string literal we just insert it in a DOM:
When we click on the close button with the id evenPopupClose it will remove the popup from DOM.
The css code for the popup looks like this:
Extras: You can display all kind of details on this event calendar popup, some including 12 hour instead of 24h because it could be confusing for some people. Also displaying the day name instead of a number.
In the case of yearly recurring events we don’t want to display the year only the month and day of the event. That is why I created the conditionalYearDisplay variable.
The eDateObject holds the start date of the event, the rest of the code is only converting the hour and minute into a more readable format with 0 prefix where needed.
The location string can be extracted from event.extendedProps property.
The eventClick property will have the event argument , jsEvent and view arguments. That’s is the data that comes from the google calendar.
Conclusion: You can add your Google calendar to your Squarespace page with Full calendar plugin by adding a new code block to your page with some customization. In order your calendar to work you need to have an API key and your calendar to be public.
