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


8 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
      • 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.

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

          Reply
  2. 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

    Reply
  3. 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?

    Reply

Leave a Reply


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: