Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Contributor

Canvas Course Calendar Embed Capabilities

Has anyone found a way to embed a Canvas course calendar on the course front page?  I'd also be interested in knowing if this absolutely cannot be done for some reason.  This has probably been asked a million times, but it's a question that comes up all the time from our staff.  I know about embedding a Google calendar and synching the Canvas course calendar to Google, but was hoping to find a direct path.  Thanks!

13 Replies
Instructure Alumni
Instructure Alumni

 @kristin_bayless , this isn't possible on the front end of Canvas, but  @GideonWilliams ‌'s school wrote some custom code to have a link to the course calendar appear in the course navigation, and you'll find a writeup of it here: Calendars, calendars...and a thank you! This is about as direct a path as I've seen so far.

Even so, if you're interested in a backend solution, I've shared this with the Canvas Developers‌ group to see if they know of a way to display the calendar itself on the course home page.

Last, if you use the Syllabus as your course home page, a calendar with the due dates for the courses shaded in will appear in the right sidebar of the page. For a look at that, check out 

Hi Stephanie,

Thank you for pointing me in multiple directions!  We're still looking for that front page solution, but I'll check out these other possibilities as well.

Do feel free to drop me a line if you need more info...

Community Contributor

I was able to use an iframe and embed the calendar to my front page. 

Community Participant

Hi Kendra,

Are you able to please elaborate on your iframe solution? We are looking at iframes as an option rather than playing with any JavaScript.

Thank you.

I'd love to know more about the iFrame embed solution too - I've kind of got something working but it's doing that whole inception thing by rendering the whole Canvas site in the iFrame.

272307_Screen Shot 2018-04-03 at 4.04.41 pm.png

I also have it rendering the entire Canvas site. If anyone has a way to prevent that, it would be wonderful. For anyone wondering, here's the iframe code to use: <p><iframe src="" width="1000" height="350"></iframe></p>

Community Contributor

We use something very similar that added a link to Calendar to our course menu.

Calendar in Course Menu

Community Champion

Doesn't answer the embedding issue but here is something we did at our school which was to add the Calendar as a link in the Navigation menu (with the aid of a bit of script) -

Which reminds me that we should actually create a link that opens up in a new Window as it still doesn't solve the issues of going back to the course (easily).

Community Member

If you simply restrict the width of the embedded calendar page within iFrame to 600px or smaller, it collapses the Canvas navigation bar (like for Mobile view) and looks quite clean. The screenshot below shows the Calendar embedded into a Page using this code:

<iframe style="overflow: hidden; text-align: center;" src="" width="600" height="1000">

Screenshot 2020-10-31 135221.png

0 Kudos
New Member

Hi Kristin,

I know you posted this 4 years ago but were you able to find a solution?

Thank you!


0 Kudos
Community Member

This is an old Topic, but does anyone know if you do put the calendar in the iframe, can you set it to just show your class, and not all of the classes for the students? I would like to use the calendar, but haven't gotten into it yet.

0 Kudos