Google provides two simple ways, other than you writing your own client code to talk to their APIs, to embed a calendar in your web page. One method is easily found by Googling for the info. This link explains how you can generate a piece of code directly from your calendar settings page, which you then paste into your page. This code uses a simple iframe. The other method is to use a Google Gadget. While they are primarily meant to embed in iGoogle, you can also embed them in your own site. Here’s how:
- Log in to the Google account that owns the calendar you want to embed.
- Make sure the sharing option is set to public (if that’s truly what you want!)
- Go to this URL: http://www.google.com/ig/directory?hl=en&url=www.google.com/ig/modules/calendar3.xml. This is a Google gadget. Note the last part of the URL – calendar3.xml . DO NOT use calendar.xml . It doesn’t work any more (as I found out to my chagrin when the calendar for our local soccer club web site suddenly stopped rendering for no apparent reason).
- You’ll see a link in the bottom right hand side of the page, titled: Embed this gadget >> , which means ‘Embed this gadget in some page other than at iGoogle’. Click on this link .
- Customize the gadget’s appearance with the available options. You should see the changes you make reflected immediately. If not, click ‘Preview Changes’.
- Once you are happy with the final appearance, click ‘Get the code’
- Select the generated code in the text box, copy and paste it into your page.
The gadget uses an XML feed via web services to draw the content directly in the page, as opposed to using an Iframe, which for a Geek like me is a much more elegant solution than more easily found one. Plus, I like the fact you get a monthly calendar with a list of upcoming events directly below it. (When you customize the gadget’s appearance, change the height to 400px, for example, and you’llsee what I mean).
You can see a working example at Saanich Peninsula Soccer Club’s site.