Google calendar

Use this guide to learn how to add a Google calendar to a page.

Step 1: Navigate to your Google calendar

On your computer, open Google Calendar.
In the top right, click Settings.

Step 2: Make the Google calendar public

Your embedded calendar will only be visible to people you've shared it with. To allow all visitors to see your calendar, you'll need to make it public.

On the left, under Settings for my calendars, click the name of the calendar you want to share.
Under Access permissions for events, check the box next to Make available to public.
Click OK.

Step 3: Customise the Google calendar (optional)

The Google calendar will automatically show:

Title
Navigation buttons
Date
Print icon
Tabs - allow user to change the display to Week, Month or Agenda
Calendar list - if there is only one calendar deselect, only required for multiple calendars
Time zone.

The default view for the Google calendar is Month, but can be changed to Week or Agenda. The width and height can be modified to change the size of your calendar. The first day of the week can be modified. The background colour can be changed to match your school colours.

Learn how to customise your Calendar.

Step 4: Copy the calendar's embed code

On the left side of the screen, click the name of the calendar you want to embed.
In the Integrate calendar section, find the Embed code.
Select and copy all of the text in the box. Later under Step 7, this is the code you will need to place in the script component in Adobe Experience Manager.

Find the embed code in the Integrate calendar section.

Step 5: Log in to AEM and navigate to Sites

Navigate to the web page you wish to add the Google calendar to.
Alternatively, you can create a new page.

Step 6: Add the script component

It is important that you check that you are using a complete script. Using an incomplete or incorrect script may break your page.

We recommend that you create the calendar on a new page to check it works correctly before copying the component to a page or your homepage.

Select Drag components here.
Select the plus icon.

Select Drag components here and select the plus sign

Select Script from the Insert New Component list.

A Script component will appear on the page.

If the Rich text editor component also appears, write a small introduction explaining what the calendar is. For example: Fern Tree Public School uses a Google calendar to keep parents, carers and students informed on upcoming events, news and activities.

Step 7: Edit the script component

Select the Script component.
Select the spanner icon. This is the Configure button.
Paste the Google calendar embed code (captured at Step 4), into the script component.

Paste your google script code into the script component

Select the tick icon in the top right to close the Script component.

Use the tick to close the component so you can review the calendar.

If the Google calendar is displayed correctly, you are now ready to publish the page.

Your calendar will appear embedded on the page.

Step 9: Publish your page

For changes to be updated on your live school website you will need to publish the page.
Select the slider icon near the top left corner. This is the Page Information button.
Select Publish Page from the drop-down.
If you don't see Publish Page you are an Author and will need to select Start Workflow instead. Go to our Author publish a page for more information.

The calendar will automatically update the script to reflect any changes made to the Google Calendar. For example, when you create a new event in Google Calendar, it will be synced and automatically updated on the Google Calendar displayed on your school website.

Return to top of page

School website service training and support