Embed or Link to multi-calendar view of your Google Calendar
These are the steps to embed a google calendar in your website:
- Next to ANY calendar that you want to include, hover to the right of it to reveal the drop-down menu icon, and select Calendar Settings
- In the “Embed This Calendar” section select the link “Customize the color, size, and other options”
- Select the other calendars that you want to include in your view under the “Calendars to Display” section
- Select any other options. Don’t forget to give this “multi-calendar” view a title, then click the Update Html button in the top right.
- Copy and paste the html code generated to your web page.
- Some sites do not allow you to include an <iframe>. For WordPress sites, you must install a plugin such as THIS one.
What if you just want to LINK to the multi-calendar view or email someone a link to the view?
You can do this by taking the embed code and cleaning it up a bit as follows:
- Remove the iframe tag and src=. You only need the actual url and all it’s parameters.
- When you copy and pasted the embed code, you are likely to see several occurrences of & which will cause the link to show you a blank calendar. Replace these occurrences with just the & character.
Example original embed code:
<iframe src=”https://www.google.com/calendar/embed?title=My%20Multi-calendar%20View&height=600&wkst=1&bgcolor=%23FFFFFF
&src=ge1ggajmec5tb027cpc8ehfm2c%40group.calendar.google.com&
color=%23182C57&src=2vedr7ecngr0q21uv3h612vhak%40
group.calendar.google.com&color=%238C500B&
src=36hafq4ddukipiemod2e9k27kc%40group.calendar.google.com&
color=%23711616&ctz=America%2FChicago” style=” border-width:0 ” width=”800″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>
After cleanup, hyperlink to use:
https://www.google.com/calendar/embed?title=My%20Multi-calendar%20View&height=600&wkst=1&bgcolor=%23FFFFFF&
src=ge1ggajmec5tb027cpc8ehfm2c%40group.calendar.google.com&color=%23182C57&
src=2vedr7ecngr0q21uv3h612vhak%40group.calendar.google.com&color=%238C500&
src=36hafq4ddukipiemod2e9k27kc%40group.calendar.google.com&color=%23711616&
ctz=America%2FChicago” style=” border-width:0 ” width=”800″ height=”600″
frameborder=”0″ scrolling=”no”>