In this SharePoint tutorial, we will discuss, how to add calendar to modern sharepoint page in two different ways. We will see, how to use the SharePoint online modern event web part to display events on modern sites. I will also show you, how to embed sharepoint calendar in modern page.
We will also see how to add calendar from another site in SharePoint Online.
Adding a calendar to a SharePoint modern site is not straightforward. Here we will see 2 ways to add a calendar to sharepoint home page or any other modern SharePoint page.
SharePoint Online Calendar
Here I have a calendar list created in the SharePoint Online modern site. To create a SharePoint Online calendar list, click on the Settings icon -> Add an app and then choose the Calendar list template.
You will see the classic look of the sharepoint events calendar as it is still not converted into modern list.

We will display this sharepoint calendar in a sharepoint online modern page.
Here we will see the below two ways add calendar in modern sharepoint page.
- SharePoint modern events web part
- SharePoint modern embed web part
Read: SharePoint online quick links web part – How to use
Add calendar web part in SharePoint Online modern page using events web part
Let us see, how to add calendar web part in SharePoint Online modern page using sharepoint online modern calendar web part or sharepoint events web part.
Open a SharePoint Online modern page, click on the Edit button to edit the page. Here I have added a section and then click on the + icon to add a web part to the modern page. Here search for Events.

Read: Customize Modern SharePoint Online Site
If you have only one calendar in the SharePoint list, then it will display the calendar events in the modern page like below:

SharePoint event web part customization
Let us see a few SharePoint event web part customization options. If you have more than one calendar then you can select the list and configure a few options.
Edit the calendar web part and you can see the Events properties panel like below. Here you can set the below properties:
- Source: Select the SharePoint site where your calendar list is presented. You can choose from the below 4 options:
- This site
- This site collection
- All sites
- Select sites
- Event list: Choose the event list that you want to display.
- Category: Select the Category of the events like All, Birthday, Get-together, Holiday, Meeting, etc. Make sure you have selected the category while adding an event to the SharePoint calendar list.
- Date range: Here select the date range of which events you want to display like:
- All upcoming events
- This week
- Next two weeks
- This month
- This quarter
- Select date range: If you enable this option, it will allow you to select From and To date.
- Layout: Here you can select a layout like Filmstrip or Compact. If you want to display the SharePoint calendar in a 1/3 column layout, then you can choose the Compact view.
- Show up to this many items at a time: Here choose how many items you want to display, by default it will be 20 items. (Note: Number of items must be between 1 and 200)

If you will choose the Compact layout the sharepoint online modern calendar will looks like below:

Provide a Title for SharePoint Online modern calendar
You can also provide a title for the calendar. Simply, edit the page and type a title like below and Save and Republish the modern page.

After any modification to the page, you should Publish/Republish the modern SharePoint page.
This is how to add calendar webpart in sharepoint online modern page. In the same way, you can edit the home page and add a calendar to sharepoint home page.
Read: SharePoint Online quick chart web part
Embed SharePoint calendar in modern page
The other way, we can add calendar to modern sharepoint is by using the sharepoint modern embed web part.
To embed a calendar in a embed web part, we need to create the embed code.
Copy the SharePoint calendar URL from the browser URL and make an embed code like below:
<iframe src="https://tsinfotechnologies.sharepoint.com/sites/SPGuides/Lists/TSInfo%20Team%20Calendar/calendar.aspx" width="750" height="500"></iframe>
Now edit the modern SharePoint page, where you want to embed the calendar, then add a web part and search for embed, then add the SharePoint Online modern embed web part like below:

Then enter the above embed code in the modern sharepoint embed web part.

Then you can see the calendar will appear in the modern SharePoint page like below:

The problem here is, it will display the entire page, users will be able to see the Navigation, logo, etc.
This is how to embed sharepoint calendar in modern page.
Read: How to create a team in Microsoft Teams
SharePoint add calendar from another site
It is very easy to add calendar from another SharePoint site in the sharepoint modern events web part.
Add a event web part and then edit the web part.
There in the Source, then choose Select sites. Here you can select multiple sites. Search site by title or even you can enter the URL or choose from frequent sites.
Here I have selected the below site:
https://tsinfotechnologies.sharepoint.com/sites/EnjoySharePoint/
And I have added the SharePoint Online modern event web part in the below site:
https://tsinfotechnologies.sharepoint.com/sites/SPGuides/

Now, you can see the events will appear like below

It even allows us to filter events by category.
This is how to add calendar from another site in SharePoint Online. Not only from single site, we can display events from multiple SharePoint site in SharePoint Online modern page.
You may like the following SharePoint tutorials:
- SharePoint communication site vs team site
- How to create and use SharePoint Calendar
- SharePoint Online Group Calendar Web Part Tutorial
- SharePoint Customization – Complete Guide
- SharePoint Create Folder in List or Document Library
- SharePoint Online Highlighted Content Web Part
- SharePoint download multiple files
In this SharePoint tutorial, we learned, how to add calendar webpart in sharepoint online modern page. We saw how to use the below web parts to display SharePoint online calendar:
- sharepoint online modern events web part
- sharepoint online calendar web part
- SharePoint Online modern embed web part
- SharePoint add calendar from another site
I am Bijay a Microsoft MVP (8 times –Â My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Article says how to create a SharePoint Modern Calendar list, then never does so. Only picks an already existing list without showing us how it got created.
This is available now. Go to custom list, create new view, select calendar.
Good article, but I can’t believe (well actually i can because SP Online is painful) that MS now don’t have a web part to show a calendar as a proper calendar!
I have many business users who have site homepage and portal pages with this and the move to SPO is really making them all hate SP even more than before.
Dumping it in an iFrame and having the whole page displayed is ancient tech – pathetic and nothing ‘modern’ about it.
Thanks MS.
Hi there,
About the embed web part, note that it is possible to hide the page header by adding the parameter IdDlg=1 into the URL:
What would the revised embedded URL look like? Where is the parameter added? Thanks!
At the end of the URL, make it like this: /calendar.aspx?IsDlg=1
When adding a calendar from another site onto a site page using the Events web part, is it possible to post new events to that other calendar using this web part? When I click the `+ Add event` button from the web part and create an event, it doesn’t get saved to the calendar on display – rather it gets saved into different Event list within the site. Is this working as expected or should I be able to add to the external calendar?
Half of this article is adding actually adding events as a list not even a calendar – why on earth has it not been possible for MS to develop a responsive calendar web part for modern sites?!