In my previous blog, I explained how to create a modern calendar view in SharePoint Online/Microsoft Lists. In this blog we will see how to add the modern calendar to a SharePoint online page.

We have a List web part in SharePoint online which allows you to display a list from your site on a page. But currently it doesn’t support modern calendar views. So, you will need to use below workaround to add Modern Calendar to a SharePoint Online page.

Workaround

We can use Embed web part in SharePoint online to add modern calendar to a page.

Follow below steps to embed modern calendar to a page:

1. Go to your SharePoint list and open the calendar view.

2. Copy the URL of calendar view from browser and note it down as we will use it in later steps.

3. Go to your modern SharePoint page and open it in Edit mode by clicking Edit button from top right corner.

4. Add Embed web part on your page and open it in edit mode.

5. Construct the embed code using the <iframe> tag in below format:

<iframe src="https://<tenant>.sharepoint.com/sites/siteName/Lists/ContentScheduler/Calendar.aspx" width="100%" height="600"></iframe>

6. Replace src attribute in above code with the URL of calendar view we noted in step 2.

7. In the property pane of Embed web part, paste the embed code into the Website address or embed code box.

7. Close property pane of Embed web part and Publish/Republish the page.

You will see the final output on SharePoint page like given below:

UPDATE: SharePoint out of the box List web part now supports modern calendar views (to show on modern pages), see Add Modern Calendar to a SharePoint Online page using List web part.

Learn more

• Microsoft Lists: Calendar view item drag and drop
• Unscheduled Pane in Microsoft Lists Calendar Views

In my earlier blog, add modern calendar to a SharePoint online page, I explained how you can show modern calendar list view on SharePoint Online modern pages using Embed web part. I used embed web part because modern calendar views were not supported in SharePoint out of the box List web part at that time.

Fortunately, Microsoft is rolling out a new feature which will support modern calendar views in List web part. This feature is associated with Microsoft 365 Roadmap ID 70750. In this blog we will see how to add the modern calendar view to a SharePoint online page using List web part.

1. First of all, create a modern calendar list view by following this blog: Create a modern Calendar view in SharePoint Online/Microsoft Lists.

2. Go to your modern SharePoint page and open it in Edit mode by clicking Edit button from top right corner.

3. Open web part toolbox and search for List.

4. Click on List web part from Search results. It will add the List web part to your modern page.

5. Initially the List web part shows all the lists available on your SharePoint site. Click on the list name where you created a modern calendar view OR you can also select a list from web part configuration property pane which opens when you click on Edit web part button

6. By default the List web part will load the default view of your SharePoint list. If you have set newly created Calendar view as your default view, skip this step. Else, select your calendar view from Switch view options dropdown as shown below:

7. Click on Publish/Republish button to save the changes.

You will see the final output on SharePoint page as shown below:

Learn more

• Microsoft Lists: Calendar view item drag and drop
• Unscheduled Pane in Microsoft Lists Calendar Views