Calendar

Course Calendar

This is an example of embedding a widget with multiple calendars. This might be useful if you want to have different calendars for assignments, exams, instructor office hours, GSI office hours, etc.

Instructions

We suggest that you delete these instructions before publishing your website.

Create the Calendars:
- Go to Google Calendar.
- On the left sidebar, click the + sign next to “Other calendars” and select “Create new calendar”.
- Create your calendars and name them appropriately.
Obtain the Embed Code for Each Calendar:
- For each calendar, go to its settings by clicking on the three dots next to the calendar name and selecting “Settings and sharing”.
- In the calendar settings, scroll down to “Integrate calendar” and copy the embed code provided under “Embed code”.
Combine the Embed Codes:
- Instead of copying the entire embed code, you need the calendar’s ID, which is part of the embed URL. It will look something like calendarID@group.calendar.google.com.
- For example, in the embed URL https://calendar.google.com/calendar/embed?src=calendarID@group.calendar.google.com, calendarID@group.calendar.google.com is the part you need.
Create a Single Embed Link:
- Use the base URL for embedding multiple calendars: https://calendar.google.com/calendar/embed?
- Append each calendar ID to the base URL using the format &src=calendarID@group.calendar.google.com for each calendar you want to include.
- Optionally, you can customize the appearance by adding parameters (e.g., &color=%23F6BF26 for the color, &ctz=America%2FLos_Angeles for the time zone).
For example, if you have two calendars with IDs calendar1ID@group.calendar.google.com and calendar2ID@group.calendar.google.com, your combined embed link would look like this:

https://calendar.google.com/calendar/embed?src=calendar1ID@group.calendar.google.com&src=calendar2ID@group.calendar.google.com

Substitute this URL into the src attribute of the calendar’s iframe at the top of this page.