How to embed a modern calendar to a SharePoint page

By João Ferreira Jan 10, 2021 SharePoint 8 Comments

Modern SharePoint calendars have finally arrived bringing a new and refreshed interface to the classic SharePoint calendar lists.

If you do not know yet how to create a modern calendar in SharePoint, I recommend you have a look to this post where you will find detailed instructions and a video explaining the creation process.

Modern SharePoint calendar

Despite the existence of a dedicated web part to embed lists in a modern SharePoint page it does not support the Calendar view which means that you will need to use a workaround to get the calendar in the page along with other web parts.

Thankfully, the workaround can be done using SharePoint out of the box features and is fully supported by the platform.

So, to get the modern calendar embed in your SharePoint page do the following:

Go to the modern calendar and from the browser copy the link to it
Navigate back to you modern SharePoint page and in edit mode add the Embed web part
Simply pasting the Link to the calendar will cause an error in the webpart so you will need to do it using an iframe in the following format:
```
<iframe src="https://handsonsp.sharepoint.com/teams/ProjectX/Lists/Sessions/AllItems.aspx?viewid=3bf6a51f%2Dcf73%2D4f06%2Da3c3%2D243458194df1" width="100%" height="720"></iframe>
```
Make sure the width is set to 100% and adjust the height to your needs
Save and publish the page

The final result will be similar to the following image with a modern calendar visually integrated with the design of your modern pages.

Calendar vector created by vectorjuice – www.freepik.com

8 Responses to “How to embed a modern calendar to a SharePoint page”

Matt
January 11, 2021

Joao,
If you iframe the “new” calendar view, and click an event, it opens a download dialog with some garbage file name. It should of course open the details pane. Do you know if there’s a way around this, or is this just another poor implementation by Msft ?
- João Ferreira
  January 11, 2021
  
  Hi Matt,
  
  Have not seen this behaviour in the few implementations I did of this solution. Could well be an error from the system, have you tried a different browser? Are you using a simple custom list or do you have your own content types?
  - Gene Rice
    January 28, 2021
    
    When I click an event in an iframed “new” calendar view, nothing happens. Multiple events on one day will open the Events Pane, but even clicking events there have no action/response currently.
    - João Ferreira
      February 1, 2021
      
      Hi Gene,
      
      To open the event detail you must double click it.
      A single click will not do any thing, hope this helps.
      
      Have a nice day 🙂
Lauri Robinson
February 8, 2021

Thank you so much for this! I was able to embed a beautiful Calendar view in a SharePoint page with ease. 🙂 Much appreciated.

Lauri
- João Ferreira
  February 9, 2021
  
  Thanks for your feedback Lauri, have a nice day 🙂
Kirsten
February 6, 2023

Hi João,

Thank you as this is the only solution I found to be able to display a list from a different SharePoint . I can’t however get it to display as a calendar view, it is only showing up as a list view even though the URL I copied is of the calendar view. Any ideas?
- João Ferreira
  February 25, 2023
  
  Hi Kirsten,
  
  Thanks for the feedback, this article is a bit outdated I need to review it one of these days.
  To embed the calendar in a SharePoint page now you can use the lists web part and then in the properties select the calendar view as shown in the following image.
  https://handsontek.net/images/Comments/Calendar%20View.png
  
  Hope it helps