How to Show Calendars from Multiple Sites on Your Website

Why Google Calendar

Google provides wonderful tools: Gmail, Google Docs, Google Voice and so on. Google Calendar is great, not just for managing your own events, but for coordinating groups.

As an example, you could take a group calendar for events for a local information technology group. Other group organizers could add and update various events, and the membership could subscribe to the calendar so they would always have the most up-to-date information at their fingertips.

How to Show Your Events Calendar on Your Website

Now let’s take it a step further. You want to show the calendar on your website, so that it’s easier for group members and potential guests to learn the latest information–and then you don’t have to pester your webmaster every time you want to update an event. Fortunately, it’s easy to embed Google Calendar on your website.

How to Embed Calendars from Multiple Accounts on Your Site

There are many resources discussing how to use and how to embed Google Calendar, but let’s take it a step up: what if you want to embed multiple calendars from different accounts and display them all together on the website?

For example, let’s say your local IT group mentioned earlier wants to show events for the local WordPress group and the local graphic design group as well. Each group has their own website, their own Google account and their own calendar. There are actually several ways to accomplish this:

One: Share Access to Calendars

The most intuitive solution is to have all those different calendars showing in your Google Calendar listing. Then you can easily embed all of them.

To do this, every calendar owner will need to share their Google calendar with you. The access level does not appear to be important. Once they share it with you, they will appear in your list of calendars and you can select them when selecting multiple calendars to embed.

Two: Change the Code

This is mainly useful if you own all the calendars, but they are all in different accounts.

Let’s say you get the sharing code for two different calendars. When you do this, make sure to use the link for “Customise the colour, size and other options,” which allows you to include multiple calendars and adds a color option for each calendar. The code that you will want to paste into the website looks like this:

<iframe src="https://www.google.com/calendar/b/0/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=hjt9urm2dk2mnk30pm3g4fakk08o%40group.calendar.google.com&amp;color=%23A32929&amp;ctz=America%2FChicago" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

The boldest section is the part you care about:
&src=hjt9urm2dk2mnk30pm3g4fakk08o%40group.calendar.google.com&color=%23A32929&
As you can see, “&” is what separates attributes in the code Google gives you to add to your page. There are two attributes here we care about: “src” and “color”. “src” represents the specific Google Calendar, and “color” is what color those calendar events show as (useful mainly for when you have multiple calendars together). By repeating lines like the one above in the iframe code, you can add as many calendars as you want.

So when you have the sharing code for two calendars, just copy out the “src” and “color” attributes for one and copy the string over into the other sharing code. Then you will have one iframe that shows events from multiple calendars–and those calendars can be attached to any accounts or sites.