Calendar Embed Component

Within RED you can embed both Google Calendars as well as Outlook Calendars onto pages of your website.  This is done through the Calendar Embed Component, which is currently ONLY available on Default and Landing Page Templates.

After adding a Calendar Embed Component, you will be asked to include a title (which can be hidden), as well as which type of calendar (Google or Outlook) you will be pulling to that specific page.  After selecting the third party calendar you will be using, you will paste the URL path into the final datafield of the embed component.  This URL path, should NOT include the domain name (i.e. https://calendar.google.com/) but should include the ending of the URL (see the emboldened part of this URL for what should be included -- https://calendar.google.com/calendar/embed?src=en.usa%23holiday@group.v.calendar.google.com).

Steps to access your Google Calendars embed URL

  1. Sign into your Google account and load your default calendar view.
  2. Click the gear icon in the upper right and select “Settings.”
  3. In the left sidebar under “Settings for my calendars,” select the calendar you wish to embed.
  4. A menu should appear below in the sidebar. Select “Access permissions.”
  5. Make sure the “Make available to public” option is selected.
  6. In the left sidebar, select “Integrate calendar.”
  7. Select the “Make available to public” on the left.
  8. Select appropriate access permissions in the dropdown on the right.
  9. Click “Get Shareable Link” and copy the link to your clipboard.
  10. Copy the link under “Public URL to this calendar.

Steps to access your Outlook Calendar embed UR

  1. In Microsoft Outlook, go to Calendar > Publish Online
  2. Select “Publish This Calendar” or “Configure This Published Calendar.”
  3. The web version of MS Outlook will now open in your browser. Sign in with your UIC netID and password.
  4. Select the appropriate calendar and permissions from the two dropdown menus.
  5. Click “Save.” NOTE: saving immediately changes the corresponding urls, so you must do this before proceeding to the next step.
  6. Right-click the “HTML” url and select “copy.

Accessibility Requirements

The accessibility of Google or Outlook Calendars is dependent on the Google and Outlook services

In the embed component, you are responsible for the accessibility of the Title field.

Titles are required in most components to comply with the rule that headings H1-H6 must be used before a section of content to describe its context. You may select the “Hide Title” option if you don’t want it displayed, however, a site visitor using a screen reader will hear those titles. This means they should be descriptive and unique. If you only enter “Title” for example, the user will hear “title, title, title,” etc. as they tab through your content blocks. They will have no context to know if that is information they should read.

All Embeds, Forms & Tables Components