How do I accessibly embed my course’s Google Calendar into Canvas?

This wiki guide explains how to embed a Google Calendar into a Canvas course page so students can see due dates, class sessions, and other course logistics at a glance — and how to set it up so it also works well for students using screen readers or the Canvas mobile app.

Before You Start: Preparation Checklist

• You have a Google Calendar scoped to this course — due dates, class sessions, and office hours only.
• You know whether your Google Workspace allows public sharing or organization-only sharing (check with the TLC or IT Helpdesk if you’re unsure).
• You can access Google Calendar from a computer — the embed code can only be generated from the desktop site, not the mobile app.
• You have edit access to the Course Schedule page in your Course Orientation module where the calendar will be embedded.

Getting Your Google Calendar Embed Code

1. In Google Calendar on a computer, click the gear icon and select Settings.
2. In the left sidebar, under “Settings for my calendars,” click the course-specific calendar you want to embed.
3. Under Access permissions, enable “Make available for New England College of Optometry” and “See all event details”. Google will warn you that event details become visible to anyone with the link — this is required for the embed to display detailed information.
4. In the left sidebar, click Integrate calendar.
5. Next to the Embed code box, click Customize.
6. In the customization tool, set the view to Agenda (sometimes labeled Schedule) rather than Month or Week — this is the most screen-reader-friendly layout. Leave navigation buttons turned on.
7. Set the width and height to at least 500 pixels each (Google’s recommended minimum), then copy the updated code shown in the Embed code box.

Embedding the Calendar in Canvas

1. Open the Course Schedule page where the calendar should appear, and click Edit.
2. In the Rich Content Editor toolbar, click the HTML Editor icon (</>) to switch to HTML view. Canvas’s toolbar Insert > Embed option also works for pasting the code, but it can strip the accessibility attribute described in the next step when the page is saved — the HTML Editor gives you direct control over the markup.
3. Paste the embed code where you’d like the calendar to appear.
4. Inside the <iframe> tag, add a descriptive title attribute, e.g. title="BSD10320 Anatomy & Physiology I Course Calendar".
5. Directly below the embed code, add a plain-text link to the calendar’s public URL as a backup, e.g. “View this calendar directly in Google Calendar.”
6. Click Save.
7. Preview the published page — embedded content does not display while the page is still in Edit mode — and confirm the calendar and backup link both appear correctly.

Accessibility Best Practices for Your Embedded Calendar

Troubleshooting Common Issues

Issue: The calendar doesn’t appear on the Canvas page at all.

Solution:

1. Confirm you are viewing the published page, not the Edit view — embedded content only renders outside of editing.
2. Confirm the calendar’s sharing setting is set to public in Google Calendar, not private.

Issue: The calendar looks fine on desktop but is missing in the Canvas mobile app.

Solution:

This is a known limitation — the Canvas mobile app frequently does not render embedded iframes. This is why the embedding steps above ask you to add a plain-text link alongside the calendar; direct students to that link when they’re using the mobile app.

Issue: A screen reader user says the calendar is confusing or events aren’t announced clearly.

Solution:

1. Confirm the embed is set to Agenda/Schedule view, not Month or Week.
2. Re-copy the embed code after changing the view — the old code won’t update on its own.
3. Confirm the iframe still has its title attribute after saving; Canvas sometimes strips custom attributes from embeds added through the toolbar Embed tool rather than the HTML Editor.

Issue: Students see a blank calendar or a “not shared” message.

Solution:

1. Re-check that Access permissions is set to “Make available to public” (or the correct organization-wide option) in Google Calendar settings.
2. Allow a few minutes for sharing changes to take effect.
3. Confirm you copied the updated embed code after changing any sharing or customization settings — Google generates new code each time.

Self-Check Questions

• Does my calendar include only due dates, class sessions, and other non-identifying course logistics?
• Is the calendar’s sharing setting configured so students can actually view it?
• Is the embed set to Agenda (Schedule) view rather than Month or Week?
• Does the iframe have a descriptive title attribute, and did it survive saving in Canvas?
• Did I include a plain-text link as a backup for mobile users and screen reader users?
• Did I preview the published page (not the Edit view) to confirm everything displays correctly?
• Have I tested the embedded calendar with a screen reader or keyboard-only navigation?

Additional Resources

• Google: Add a calendar to your website
• Google: Use Google Calendar with a screen reader
• Canvas: How do I embed media from an external source in the Rich Content Editor?

Need Extra Support?

We are here to partner with you as you enhance your courses. If you run into technical issues or want a collaborative consultation on designing custom interactive modules, please reach out to our team: