Sunday, May 31, 2009

Embed multiple Google calendars

UPDATE: 7/30/2009 AM - It appears that Google changed the API and that these instructions do not work as advertised. I will investigate this evening and hopefully post a working solution.

UPDATE: 7/30/2009 PM - I found a solution and wrote a blog post about it.

This morning I am home sick, so I decided to figure out how to embed multiple calendars into my new home page. Some of the instructions are Google Sites specific, but they should be adjustable to whatever platform you are actually using.
  1. Go to your Google Sites page where you want to add the calendar
  2. Click on Edit Page

  3. Select the Insert menu and then select Calendar

  4. For now you can only insert one calendar, so fill out the menu box for one of your calendars

    • Editing the object through this menu box again will write over the changes we are about to make
    • I suggest turning off the calendar title, border, and name

  5. Click on Save in the menu box (A calendar widget should show up now)
  6. Click on the button for editing HTML (for some reason this takes a while to load)

  7. Open a new tab/window and go to your Google calendars
  8. Click on Settings
  9. Click on Calendars
  10. Click on one of the calendars
  11. Under the Embed This Calendar section, click on Customize the color, size, and other options
  12. Under Calendars to Display, check all the calendars you want to display on the page

  13. In the text box under Copy and paste the HTML below to include this calendar on your webpage you have to select and copy some text:

    1. Resize the box (click and drag lower right corner) so you can see all the text
    2. Ignore the text up to the second src=
    3. Select the text from that point up to immediately before &ctz=
    4. Copy (ctrl-c)

  14. Go back to the tab/window for editing the html of the Google Sites page
  15. Find the origsrc attribute and select its value

  16. Paste the contents from the Google Calendar text box to replace the attribute value (ctrl-v)
  17. Click on Update
I hope that works for you! In the end, you should have something that looks like mine. You'll notice that the calendars retain their privacy settings from Google Calendar. Most of mine just show free/busy information.


Ray said...

THANK YOU SO MUCH! you have no idea how long i've been searching for a way to do this!

Nathan said...

Glad I could help!

Brent said...

That is a HUGE saver for me! I was pulling my hair out trying to figure out how to embed my multiple gmail calendars! I wish gmail would just make it easier to color code different activities, hence I wouldn't need to make so many different calendar categories! Oh well! Thanks a ton for posting this!

Nathan said...

You're welcome (now with improved spelling!)

Anonymous said...

This is a great guide, but your calendar now looks like mine: "Invalid parameter" Did Google change something? Is there something we are missing? Put up another post if you figure it out. Thanks. daniel

Nathan said...

I normally check my own calendar through Google Calendar, so I had not noticed that this is no longer working. I assume Google changed the API. I have updated this post to indicate it is no longer accurate, and I will investigate later. I assume the same method may be used, it just needs a little tweak somewhere.

Nathan said...

I found a solution and wrote a blog post about it.

Jacki said...

THANK YOU!!!!!! I found multiple blogs and forums that discussed this matter, but yours was the only one that wasn't missing any steps and the easiest one to follow! This help me so much! Thanks again!

UPAC Webmaster said...

I had to include the initial "src=", mimicking what it appeared like (when you click HTML in the editor).