Google Calendar

Embedding your Google Calendar

Published: Tuesday, June 16, 2009

Updated: Tuesday, July 27, 2010 15:07

Google Calendar is a simple solution for keeping your readers updated on local and campus events. However, Google's iframe for the calendar is notoriously buggy, and commonly interferes with Flash advertisements on your Site.

To minimize the impact of the iframe bug, we recommend hosting the Calendar on its own Sub Page, rather than in your Right Column. Hosting the calendar on its own page means that the iframe will only affect that page, rather than every page of your Site.

Follow the guidelines below to achieve the best results from your Google Calendar.

1. Getting the Embed Code:

Go to your Google Calendar. In the calendar list on the left, click the down-arrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, then click the name of the calendar.) In the middle of the Settings page you should see "Embed this Calendar" with the embed code to the right.

2. Customize the Calendar:

Click the "customize the color, size and other options" link above the embed code. Choose your customization settings. The most important item to change is the width of the calendar. For a two column template you will want to enter 650 for the width, and for a three column template you will enter 475 pixels. Generally you will want to choose a white background color for the calendar so it will match the background of your main content area.

3. Embed the Calendar

Once you are finished with the customizations, copy the embed code from the top of the screen. Go to your Site's Admin area and create a new Sub Page named "Calendar". It is best to choose "hide in navigation" while you test the embed code. On your new Calendar page create an HTML element and paste in the embed code, press save.

When you have tested the embed code to make sure it is displaying properly on your new Sub Page, you can change the "hide in navigation" setting, paste the Sub Page into your Header/Footer links, or link to the page from anywhere else on your site.


Recommended: Articles that may interest you