Embed a Google Calendar in a CMS page

posted Jan 10, 2012, 2:33 PM by victor.fascio@mail.ccsf.edu
You can display a Google Calendar in a CMS web page. Here's an example.
To display the calendar, you'll need to copy some code that Google posts explicitly for this into a special CMS component: the snippet. So, the first thing you'll need to do is make sure that you get the snippet component in the page where you want the calendar to display.

Get the snippet component

First, go the CMS page where you want the calendar to go. Since the calendar takes a fair amount of space, you'll need to use a template with one or two columns - not three, which squeezes a calendar into a hard-to-read space.
Copy the address of the page from the address bar and email it to a CMS admin: either Joe Jah (jjah@ccsf.edu) or Wendy fong (wfong@ccsf.edu) and ask for the snippet component to be added to that page.

Copy the Calendar's Embed code

Open your Google Calendar and click Setting. Click the Calendar tab and click the name of the calendar that you want:
Choosing a calendar in Google's Calendar ssettings

The settings for that calendar open up.
Scroll down to the Embed code section.
Place your cursor inside the Embed Code window:
Right-click (Control-click on the Mac) and choose Select All

Choose select All on the right-click popup menu

Paste the Embed code into the snippet component

Back in your CMS page, add the snippet component where you want the calendar to appear.
Edit the snippet and Paste the embed code into it: Right-click (Control-click on the Mac) and choose Paste.
When you OK to save the code in the snippet, the calendar appears.

Now whenever you edit that calendar in your Google account, the result will appear immediately in your CMS page.