Tuesday, July 21, 2009

Embed a Google Calendar

One of the best features of Google Calendar is that you can embed it in other websites. For example, I embed a Google Calendar of my class assignments INSIDE the Desire2Learn course management system for my classes. Here are step by step instructions for embedding a Google Calendar in a blog or other webpage.

To embed a GoogleCalendar you will need the "embed code" (some scary-looking HTML). The embed code is only available for calendars you have chosen to share publicly. So, go to your panel of Google Calendars, and click on Settings to share a calendar and get the embed code.

1. Access Settings. Click on Settings in the lower left-hand calendar of the panel that lists all your Google Calendars.

2. Select Calendar. You will see a listing of ALL your Calendars. Find the calendar you want to embed, with a column that shows whether the calendar is shared.

3. Share calendar. Click on the share settings link for the individual calendar you want to embed:

To embed the calendar, it needs to be publicly shared:

4. Calendar detail. Next, click on the Calendar Details tab that you should see across the top of the screen. Change from Share this calendar:

By clicking on the Calendar Details tab instead:

5. Default embed code. There is a default embed code you can see on the Calendar Details screen - but what you really want to do is click on the link that says Customize, so you can change the height, width and other display options.

6. Customize embed code. It is important to change the height and width to what you want - and you can also select whether default view is Agenda, Weekly or Monthly, along with other options. You can then copy and paste the resulting HTML embed code that shows up in the box as you make your choices.

7. Cut-and-paste embed code. The specific instructions for how to add the HTML code will vary based on where you are publishing your content. For Blogger.com blogs, you can switch to the "Edit HTML" tab and insert the code.

Don't worry if it looks a little weird - sometimes the content will not display until you actually publish the webpage online and view it in a browser. For example, in Blogger.com, the embedded calendar does not display until you publish the blog page; what you will see instead is this (below). Don't worry: ou can use the Preview mode to check and make sure everything really is okay!

8. Publish the page. You can see the results of my embedded Roman Calendar below! :-)