Jump to Main Content
Content > Programming > Embedding Google Calendars
Embedding Google Calendars

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 – &amp; 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&amp;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.


Other Pages
jQuery Javascript Framework Next Page
 
Comments are solely the opionion of the author and not to be construed as the opinion of anyone else.

Poster Thread
Anonymous
Posted: 2012/10/16 5:29  Updated: 2012/10/21 21:16
 Re: Embedding Google Calendars
Halo Mark,

I have a probleme to use multiple calendars. I use 9 calenders for every room one.
But i can't get the calender name in the iFrame. It must be a field because the collor is set by the calender name, so it should be available...i'll think. At this moment we type the room name in the title.
I'll hope you can help me.

on this site you can see what i mean:
http://www.debrinkobdam.nl/agenda
Reply

Poster Thread
me
Posted: 2012/10/21 21:21  Updated: 2012/10/21 21:21
Administrator
Joined: 2005/2/25
From: Austin, TX
Posts: 85
 Re: Embedding Google Calendars
Not sure I have an answer for you. I don't remember having the name embedded in the calendar iFrame, I think just the calendar(s). I think you can put the name(s) in your own page HTML and then just embed the calendar(s) you want right after it. What I documented was just the rudimentary basics - and a solid year ago...perhaps longer. The general concept should still work, though.

Note: at least one of your calendars doesn't have public permission to view because I get the "you don't have permission" error.

Good luck.
Reply

Poster Thread
albisatya
Posted: 2014/2/3 3:20  Updated: 2014/2/3 3:20
Just popping in
Joined: 1969/12/31
From:
Posts: 1
 Re: Embedding Google Calendars
Thanks for the helpful info on variables. It's been hard to find this level of detail.

I have a question about week view, though. I am hoping to be able to hide the end time of events (which span days: starting at night, ending in the early AM), as some users of the site are getting confused. Do you know if it's possible to set those not to appear (as in month view)?

Here is an example of what I'm talking about:
http://www.kp-ravintolat.fi/

Thanks in advance!
Reply
Login
User

Pass

Remember me



Lost Password?

Register now!
 

 

 

(c) 2006-2007 - Mark Boyden
Privacy - Legal Stuff - Contacts