What is up.
RSS icon Email icon Home icon
  • Embed or Link to multi-calendar view of your Google Calendar

    Posted on February 4th, 2014 Alan No comments

    These are the steps to embed a google calendar in your website:

    1. 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
    2. In the “Embed This Calendar” section select the link “Customize the color, size, and other options”
    3. Select the other calendars that you want to include in your view under the “Calendars to Display” section
    4. 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.
    5. Copy and paste the html code generated to your web page.
    6. 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:

    1. Remove the iframe tag and src=.  You only need the actual url and all it’s parameters.
    2. When you copy and pasted the embed code, you are likely to see several occurrences of &amp; 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&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF
    &amp;src=ge1ggajmec5tb027cpc8ehfm2c%40group.calendar.google.com&amp;
    color=%23182C57&amp;src=2vedr7ecngr0q21uv3h612vhak%40
    group.calendar.google.com&amp;color=%238C500B&amp;
    src=36hafq4ddukipiemod2e9k27kc%40group.calendar.google.com&amp;
    color=%23711616&amp;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”>

    Leave a reply

    You must be logged in to post a comment.