Displaying Events from Multiple Google Calendars in a Single Embedded Calendar View
Of all the things Google Calendar is good for, producing a single embedded calendar from a set of Google Calendars has not been one of them…
[Cue sideaways glance] Or so I thought…
In a flurry of activity earlier today, the Reverend posted this:
while I was admiring the new link to UMW Blogs on the UMW homepage, I clicked on the Events link, and to my surprise it was a Google calendar. Wow! Who knew? When looking at the source code, I released it was actually an aggregation of 10 different Google Calendars–all the more fascinating.
Jim went on: “I did a search for the term “UMW” through Google’s public calendars and found over 40″ and the describes subscribing to the calendars, looking at them in the single aggregated view within Google Calendar itself, before hitting a problem: “Google won’t given me an embed code for the aggregation of all of the public calendars I subscribed to around UMW”
Err… rewind one moment… “When looking at the source code, I released it was actually an aggregation of 10 different Google Calendars“…?
This is what Jim saw but didn’t see:
Got it yet?
Take these two calendars, discovered by searching the Public Calendars in Google Calendar:
- Snooker Championships Listing (some events are listed over the next four months or so).
- Formula One Grand Prix listings for 2009 (the events start during March, 2009).
Now look through to March on this calendar: aggregated calendar view. It shows events from both calendars in the same view.
So what we have here is an aggregated calendar view that can be used to display several (that is, multiple) Google calendar feeds in a single view. To embed the calendar in your own page, just stick it in an iframe.
For each extra calendar feed, just add &src=CALENDAR_ID to the URL. The CALENDAR_ID will probably be of the form:
jabqnchvht5r2pjv0haqlg1j8s%40group.calendar.google.com
PS I did wonder whether I could add the aggregated calendar view as a single calendar to my Google Calendar. It seems not:
That is, it looks like each calendar feed will be added separately, rather than as a single, combined calendar.
But while that would have been a “nice to have”, the ability to display events from multiple Google calendars in a single calendar view in such a straightforward way is probably a big enough win anyway:-)
PPS aren’t comments wonderful (thanks Steve:-) – it seems thaqt you can generate the combined embed code within Google Calendar… Subscribe to the calenders you want to display, then go to the calendar settings:
Select the “Customise the color, size and other options” in the “Embed the Calendar” area:
And then select the calendars you want to include:
Simple:-)
I had to do something similar for a set of Google calendars recently and did it through the GUI (Calendar settings > Customize the color, size, and other options > Calendars to Display).
The resulting embed code is the same as shown in your post, but might be a bit easier to produce.
Users get the option to show/hide each calendar in the aggregated, embedded view.
Steve
Steve Boneham
December 4, 2008 at 9:04 pm
@steve thanks – duly added to the post :-)
Tony Hirst
December 4, 2008 at 9:34 pm
Tony,
I have to thank your network, I had no idea, and now I know. I feel stupid, but I also feel rich as kings. So thank you much. And while I see the option in Google Calendars now, the question of aggregation ical from a series of different calendars remains the next step in my mind. Need we ask everyone to use Google? Etc.
Anyway, thanks for go the extra yeard, and sorry for overlooking the obvious twice :)
Jim
December 4, 2008 at 10:25 pm
[...] already discovered and b) Google Calendars allows you to do this easily already. Here’s the rescue post from Tony, and below is my quote from his solution c/o commenter Steve Boneham (thanks Steve): [...]
Aggregating Google Calendars at bavatuesdays
December 4, 2008 at 10:32 pm
@jim I think you can use 30boxes to aggregate up to 3 ical feeds (or a mixed economy of RSS and ical feeds): http://30boxes.com/boxed
e.g. here are Stanford Lectures and Film ical feeds in the same calendar: http://tinyurl.com/5zterq
and here’s the form where I built that calendar:
http://tinyurl.com/6jjdjb
I’ll do a quick post on this later today.
Tony Hirst
December 5, 2008 at 9:00 am
[...] With Yahoo Pipes Published December 6, 2008 Pipework , Tinkering Following up on Displaying Events from Multiple Google Calendars in a Single Embedded Calendar View, and picking up on a quip Jim Groom made in the posted that started this thread (”Patrick [...]
Merging Several Calendar iCal Feeds With Yahoo Pipes « OUseful.Info, the blog…
December 6, 2008 at 11:22 am
[...] Displaying Events from Multiple Google Calendars in a Single Embedded Calendar View [...]
[Geekeries]:Displaying Events from Multiple Google Calendars in a Single Embedded Calenda… « Lelapin’s Weblog
December 6, 2008 at 8:52 pm
[...] up on Displaying Events from Multiple Google Calendars in a Single Embedded Calendar View, and picking up on a quip Jim Groom made in the post that started this thread (”Patrick suggested [...]
[Geekeries]:Merging Several Calendar iCal Feeds With Yahoo Pipes « OUseful.Info, the blog… « Lelapin’s Weblog
December 8, 2008 at 4:53 am
After stripping the iFrame out, I found that I had to convert all the “&” to “&” in order to use the Google generated code as a stand alone link. Otherwise it would produce a blank calendar.
Google generated:
Just stripping the iframe out produces a blank calendar:
http://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=han28112iat1harnqd9qaqv1l8%40group.calendar.google.com&color=%23528800&ctz=America%2FNew_York
Stripped and formatted to use as a stand alone link, including colors:
http://www.google.com/calendar/embed?showTitle=1&title=Snooker%3A%20Calendar
&showTabs=1&width=540&height=420
&wkst=1&mode=MONTH&ctz=America%2FNew_York&bgcolor=%23FFFFFF
&src=han28112iat1harnqd9qaqv1l8%40group.calendar.google.com&color=%23528800
Brandt
December 16, 2008 at 7:36 pm
That should say convert all the & to &
Brandt
December 16, 2008 at 7:39 pm
ahhhh, this keeps stripping things out of my comments!
remove all the “amp;” from after the “&” sign, and everything works as a link.
Brandt
December 16, 2008 at 7:41 pm
Brandt – your tip was just what I needed as I couldn’t figure out how to turn the iframe code into a stand alone link. Great Work!
Ryan
November 22, 2011 at 3:12 pm
[...] Events from Multiple Google Calendars in a Single Embedded Calendar View http://ouseful.wordpress.com/2008/12/04/displaying-events-from-multiple-google-calendars-in-a-single… No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI [...]
Too many calendars… Not anymore! « gploski at slc dot edu
December 17, 2008 at 6:07 pm
[...] Displaying Events from Multiple Google Calendars in a Single Embedded Calendar View « OUseful.Info,… PPS aren’t comments wonderful (thanks Steve:-) – it seems thaqt you can generate the combined embed code within Google Calendar… Subscribe to the calenders you want to display, then go to the calendar settings: [...]
Aggregating Google Calendars « Scotsman on a Horse
March 19, 2009 at 1:30 pm
This appears to have broken with the 7/29/09 google apps release… are you seeing an error now?
Rebecca
July 30, 2009 at 8:33 pm
Thanks for this critical info. We have been using HTML Calendaring for our site and I have wanted this functionality out of Google Calendar. I greatly appreciate it!
Micah Holtzinger
November 2, 2009 at 8:13 pm
Brandt – you are my hero – that is exactly what I was looking for. I am using embedded calendars showing multiple calendars but some mobile browsers don’t support the iframe, so they were locked out of the calendar.
Now with what you mentioned about swapping out the ampersand codes with real ampersands, which creates a standalone link, I can check for mobile browsers and deliver the stand alone link to them.
Erik
November 12, 2009 at 9:34 am
Very neat feature that allows me to seperate my personal and work calenders for sharing and yet see them all in one place.
Andy
August 10, 2010 at 4:28 pm
dude
thanks
yeah, “embed this calendar”
“customize” – select desired calendars
and it does the code, no editing required
cheers
Tiburon
September 23, 2010 at 12:33 am
To get the aggregated view on your site:
In google sites create a new page. Then insert calendar. Then in the calendar properties, click on ‘Display Another Calendar’ link. You can do this for many calendars and google will aggregate them into one view on your site :)
Hope this helps
Online Events
April 26, 2011 at 6:49 am
What if I want all my calendars together in one google sites calendar, but have the option of only seeing some of them. For example, in my Cub Scout pack, a parent might want to see information about the pack and his den, but not other dens.
Thanks.
Deborah
August 27, 2011 at 6:42 pm
@deborah in Google calendar, you can choose which calendars you want to display if they have separate calendar feeds.
Tony Hirst
August 28, 2011 at 7:10 pm
Tony, thanks for the tips. So I’m able to embed a calendar with multiple calendars into on single calendar view. Is there a way to then generate an XML link for the new aggregated calendar calendar?
Thanks!
Scott
October 15, 2011 at 10:27 pm
@scott it’s some time since I looked at this, so not sure offhand… will try to find out… (if you beat me to it, please post an update;-)
Tony Hirst
October 16, 2011 at 5:06 pm
I know this is a year old, but if you happened to find a solution I’d love to know.
bjt35
January 27, 2013 at 11:18 pm
Too bad it is limited to 25 calendars to embed in the HTML code today.
I would need about 40 (for an dance school, 40 different types of lessons).
If anyone should know a way how to make such an embedded calendar view with more than 25 individual calendars, please share.
FotoDirk
January 2, 2012 at 2:36 pm
This is terrific.
Anyone know a way to do this in a widget?
gwpinetree
January 3, 2012 at 5:01 pm
Hi Tony, Jim, Brandt and all other contributors
Some great information here and has now got my daughter’s school website nicely “calendarised” – http://www.victoriaprimary.ecape.school.za
FotoDirk: I also ran into this limitation as I have upwards of 40 calendars. The question is, do those all have to be publically viewable in an aggregated way, or can you put up groups of lessons? Also, if you get that actual students to register on google and then import all the calendars, they will be able to see them all through the Google calendar view.
I agree, it is a limitation requiring workarounds, but life is often like that :-)
billy
January 28, 2012 at 4:36 am
Hi Billy – Great stuff:-) I think the Google Calendar API has moved on somewhat since I wrote this post: I’ll try to go through the comments over the next week or two to distill the various workarounds and add any updates into the original post.
Thanks to all the other comment contributors too:-)
Tony Hirst
January 28, 2012 at 10:10 am
This is a great link, thanks!
This could be used to schedule meetings by showing someone your availability by embedding the calendar on a Google Sites page, if you have your calendar set to public.
Joseph Jay Williams (@josephjwilliams)
October 16, 2012 at 8:39 pm
It does not even have to be a Google Sites page – it can be any website. Feel free to look through http://www.vps.ecape.school.za/calendar.html and http://www.vps.ecape.school.za/hockey.html as some examples of displaying public calendars aggregated in different ways. http://homes.cs.ru.ac.za/Billy/ will show you an example of showing just the free/busy details of a personal calendar. If I have shared a calendar with a specific person and they are logged in, the details will show. It works beautifully. Also take a look at Appointment Slots :-)
Billy
October 17, 2012 at 3:57 am