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