Access Keys:
Skip to content (Access Key - 0)

Using Google Calendar to embed a monthly MIT Events Calendar in your web page

Summary

The new MIT Events Calendar, powered by Localist, offers many embedding options using Localist's widget builder and, for more sophisticated integrations, the Localist API, as ways to display a portion of the MIT Events Calendar in your own department or group web site. WIth all of that, though, an easy way to embed a month-view calendar showing events in a grid is mysteriously absent. Instead, Localist provides a "best practice" article explaining why 30-day grid views are too cluttered and not lively enough at BEST PRACTICE: Why Localist Does Not Provide a 30 Day Grid-View.

So what if you still want a 30 Day Grid View but don't want to hand-code one using their API?

Google Calendar work-around

The new MIT Events Calendar provides subscription links for any list of events you can filter for on the calendar. This allows you to narrow your list to the events you're interested in, for example only those events posted by your department or your group, and then access a unique subscription link that can be used to add those events to a Google Calendar.

Google Calendar, in turn, allows you to create an embedded iFrame to place one or more calendars into a monthly, weekly, or agenda view on your own web page or web site (anything that allows you to add the iFrame HTML code). This allows you to easily create a weekly or monthly calendar showing MIT Events Calendar events and post it on your own web site.

Pros and Cons

There are several advantages and several limitations to this approach. Keep in mind that it is a work-around, and not native functionality in the new events calendar.

Pros

  • You have some control over how the calendar is presented, including the default format and controls
  • Visitors familiar with Google Calendar will find the interface familiar and easy to navigate
  • You can embed several calendars collected into a single month-view, and optionally let visitors select which ones to display
  • Clicking on an event will pop up full event information, including duration, which is more than you get from Localist's own widget

Cons

  • You cannot style of theme the calendar inside the iFrame; it will look like a Google calendar
  • There will be no links from the Google calendar back to the MIT Events Calendar
  • Some delays; Google loads feeds on a schedule sometimes only once per day, so updates may be delayed by up to a day
  • Google adds its own "map" link to events that tries to map the location of events based on the building and room information (which usually fails)
  • Not mobile friendly; iFrames of a fixed size (such as embedded Google calendars) are not mobile friendly; while they will display on mobile devices, they will usually run off the edge of the screen and require scrolling

When to consider it

If you must have/would like to have a monthly calendar of events, perhaps to show utilization of a set of rooms, your seminar schedule over a month, or a conference schedule that's also in the Events Calendar, and you don't care that the calendar does not look like the rest of your site, this may be a work-around for you.

Extra things to do

If you implement this, you will want to be extra careful to make sure that the event descriptions are complete, contain links to any sites related to the event you want people to know about, contain complete location information, and possibly directions if targeted at outside visitors. Also make sure that the content on your web page surrounding the embedded calendar explains what it is, and its limitations (i.e. "Don't click on the 'map' link, follow this link to MIT's campus map instead.").

How to do it

This is actually the easy part. Here are the basic steps:

  1. Decide on a Google account to use
    This can be an individual's Google account, or a Google account registered using a mailing list your department or admins use. It will be best to use a single Google account for all your embedded calendars. You can control which calendars to show from each embed code.
  2. Log into the Google account you plan to use and make sure you are not logged into any other Google accounts
    You can usually go directly to calendar.google.com and verify that it opens under the right account.
  3. Open another browser tab and go to the MIT Events Calendar
    You'll want to log in with MIT Touchstone if you're not already logged in.
  4. Create the list of events filtered to what you want to show on your calendar
    A few tips to make this easier:
    • Remember that search is open-ended in Localist, and searching for a department, group, tag, or location will return results that match, but also other events that match loosely, or only contain similar words in the description; searching is not usually the best way to precisely control your list
    • If you are looking for all events posted by a specific department or group, going to the department or group page and clicking on the View Full Calendar... button
    • You can navigate to a department or group page by clicking on the Departments or Groups icons on the home page, and then searching for the specific department or group in the list
    • If you are looking for all events with a certain tag, navigate to one such event, find the Tags section, and click on the tag to get a list of only those events that are tagged with the same tag
  5. Once you have the list of query or filtered list of events you want to embed, navigate to the bottom and find the subscription icons; they will look like this:
  6. Click on the Google g icon and your Google Calendar will open in a new browser tab, asking you "Do you want to add this calendar?"
    This is where it's important that you are logged into the right Google account. Click the Yes, add this calendar button.
  7. After a short delay, the calendar will appear in your Other calendars left sidebar; it's name should start with http://calendar.mit.edu/...
  8. Find the calendar you just added in your Other calendars list and click on the down-arrow button that appears next to the calendar name when you hover over it in the list
  9. Select Calendar settings from the menu that pops up
  10. On the calendar settings page, you will want to do several things
    1. Change the name to something more recognizable, such as the department, group, or room name
    2. In the Embed This Calendar section, click on Customize the color, size, and other options
      This takes you to the Google Embeddable Calendar Helper, where you can control a number of parameters to configure how the embedded calendar appears. You may want to experiment with the options. The displayed calendar should update in real time as you do. Some recommendations:
      • Hide the title and print icon (you can add your own title on your site)
      • Set the width and height to something that works on your page, but try to keep the 4:3 aspect ratio
      • In the Calendars to Display section, select any other calendars you want to show together; if you want to show multiple MIT Events Calendar feeds on the same embedded Google Calendar, subscribe to them all first, then generate the embed code
    3. Once the calendar is configured to your liking, select, copy, and save the embed code in the box at the top of the page; it will look something like this:
      <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;
      showPrint=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=uckb
      d8j1ilkali9t3glp4qb1kups333h%40import.calendar.google.com&amp;color=%234
      2104A&amp;ctz=America%2FNew_York" style="border-width:0" width="800" hei
      ght="600" frameborder="0" scrolling="no"></iframe>
      
  11. Place the embed code on the web page on your site where you want the iframe with your calendar to appear

See also

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

August 29, 2017

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
Feedback
This product/service is:
Easy to use
Average
Difficult to use

This article is:
Helpful
Inaccurate
Obsolete
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki