How to embed a modern calendar to a SharePoint page

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:

  1. Go to the modern calendar and from the browser copy the link to it
  2. Navigate back to you modern SharePoint page and in edit mode add the Embed web part
  3. 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
    Embed Modern SharePoint calendar

  4. 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.

Modern SharePoint calendar
Calendar vector created by vectorjuice – www.freepik.com


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

  1. 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 ?

    Reply
    • 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?

      Reply

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.