Notes on embedding public (or private) Google calendars into a webpage. Specific to XOOPS to a degree, but generally good for any website.

I needed to embed Google calendars into a set of webpages. It's easy and Google has instructions on embedding one (or more) Google calendars into your website. I was embedding them into the Publisher module of XOOPS (using their pagewrap feature, but you can use other modules, too, including the PageWrap module).

Quick Instructions

Essentially, it's pretty easy, you just need to add an iframe with their code which is a link to their calendar and passing the correct HTTP GET variables in the request URL. It's easy to get the code for this for a single calendar. Just go to the calendar, on the left column under My calendars, choose that calendar's drop down and select Share this Calendar. If you want it to be publicly available, you'll have to check Make the calendar public (on the Share this Calendar tab) and save it. To get the embed code, click on the Calendar Details tab (link) near the top. You may change the way it displays using the Customize the color, size, and other options link (aka, Google Embeddable Calendar Helper - notes on the various options below).

Examples

Note neither example actually works because the src variables are faked.

Simple

Minimal required definition, this one based on the primary calendar for a gmail email address, assuming it's first.last@gmail.com.

<iframe width="800" height="600" frameborder="0" scrolling="no" src="http://www.google.com/calendar/embed? ... "></iframe>

You could likely leave out the ctz, but I don't know which timezone you'd get. Notice standard non-SSL URL.

Multiple Calendars

This example uses no defaults and all options including multiple calendars each with different colors of display.

<iframe width="900" scrolling="no" height="700" frameborder="0" style="border: 0pt none;" src="https://www.google.com/calendar/embed? ... "></iframe>

Parameters

Use either insecure HTTP or secure HTTPS (as shown in the examples) – your choice. You need to use %40 for the at (@) symbol in the link. You can glean the src from the URL for each Google calendar, and to combine them, you just need to add additional src= to the URL (see the multiple calendars example above) and if you want them to display in different colors, then just use a different color=statement after each src=.

Primary URL: https://www.google.com/calendar/embed?

Other variables (var=value – & separating), none required except the calendar source.

• title - e.g. My%20Calendar - changes calendar title display
• showTitle - 0 to turn off Calendar Title(s) (presume 1 turns it back on, but the helper just leaves it out)
• showNav - 0 to turn off Navigation buttons
• showDate - 0 to turn off Date (at top)
• showPrint - 0 to turn off Print button/link
• showTabs - 0 to turn off Week/Month/Agenda tabs
• showCalendars - 0 to turn off Calendar list arrow (useful when showing multiple calendars)
• showTz - 0 to turn off TimeZone text
• mode - sets default view (WEEK, AGENDA, none is MONTH)
• height - default is 600 or to fit the container, for the browsers I've tested, it doesn't matter if you specify this or not as it expands to fit the iframe container
• wkst - when the week starts (default: 1 - Sunday, 2 - Monday, 7 - Saturday)
• hl - language: 2-letter ISO code (apparently)
• bgcolor - %23RRGGBB background color for the iframe (where RRGGBB is the RGB hex code for the color)
• src - first.last%40gmail.com&color=%23RRGGBB (where RRGGBB is the RGB hex code for the color), color not required; combine multiple source/color pairs to show multiple calendars with different background colors for each calendar's events.
• ctz - e.g., America%2FChicago - TimeZone (too many to list, so use the Embeddable Calendar Helper)

There could be others I don't know. Also, there are a couple that affect the iframe itself - width, height, and border, all of which can be set by CSS, so use as you see fit.

• width - frame width
• height - frame height
• border - style="border: 1px solid #RRGGBB"

BTW, Private calendars are displayed the same way, but you have to be logged into Google to be able to see/access them. Good luck.