Displaying the events web part as a full calendar view of the month on a modern page?

Iron Contributor

I'm using a modern web page in SharePoint Online to display events. With the modern events web part, it only displays upcoming events as tiles. The people I'm building the site for would like their events web part to show a full grid view of the calendar month.

 

I can't seem to find a way to do this in the modern experience. Would be great if anybody knows how I can do this (if it's possible)?

 

Thanks

24 Replies
Out of the Box it’s not possible in modern. You’ll have to look into a calendar spfx webpart and install it.
I got this working using the embed webpart. If you get the URL to the calendar view you want and append IsDlg=1 then it removes the navigation and just leaves the calendar. It's not as good as an spfx webpart but may be an interim solution.
Last time I tried this it didn't work, but I think it was actually when you try to add a SharePoint page to a Teams tab with embed it won't work and throws Iframe error because this was the first thing that came to my mind too!

Anyway, good solution!

Would be good if it were an OTB solution, in particuar since available in classic 

@Wendy_Lumsden 

This is very easy to install. In fact let me see if I can just share the SharePoint package. You can add it to your app catalog(this needs setup if you don't have one) and you can have a modern calendar that ties to any event list, it works great actually. Added it to Teams too. You can edit the code for this and even make it a tab you can add to Teams as well, but I haven't done that just yet.

Github
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-calendar

 

Link to a pre-built solution file: https://webbtech365-my.sharepoint.com/:u:/g/personal/cwebb_webbtech_org/EeK9Cof1TMVGowouuAGA7UwB6_AM...

@Toby McDaidYes, this feature is sadly missing. Yu can embed a calendar view using the EMBED web part, but I have never had very good results with that! 

Thanks Toby - lets hope it is in the pipeline!

@Chris Webb 

 

Thank you for your post.

The link to the react calendar solution file is no longer working.

Any chance you can publish the file again? (I don't know how to build the solution file)

CAan you please show me how to install the files needed to get a full calendar view@Chris Webb 

@Chris Webb  I downloaded the sppkg and installed it on my app catalog, but it is not available on my site. I did check to install it on sites in my tenant but when I try to add it to my site it is not available in the Add Apps-?Apps section on the site. Am I missing something?

 

Thank you and if it works, it would be a great feature.

It's not an app, it's a web part, web parts are just deployed as an app feature. The web part uses existing event lists to render the calendar in a web part. So what I did was create a "Page" on my site with just that web part on it with the settings connected to my existing event list. Then you can add that page to Teams.

@Chris Webb Thank you for your quick reply. I did upload it to my app catalog and then made sure to deploy it to all sites. But when I try to edit the modern page on my site, this webpart is not available to be added to the page. I also tried to create a Webpart page (instead of a modern site page) and then I found it listed as Calendar in the Other section. So is it not possible to add it to a modern page? Able to add to a modern page would be great!

Yeah you should be able too. I don’t think it has to be enabled per site but it’s been months since I installed it but it did work for modern pages. I noticed they had an update a few month ago for newer spfx. Not sure if it’s required to work I need to go see if mine still works and try installing on my other tenant tomorrow I guess.

@Sucheta Patil Confirmed, it doesn't work on modern pages.

@Toby McDaid 

 

Microsoft is currently rolling out the calendar view feature for modern SharePoint Online and Microsoft lists, Roadmap.

 

Using this you can create a modern calendar view in your SharePoint lists and you can add these calendar views to modern pages. Check below links for more information:

  1. Create a modern Calendar view in SharePoint Online/Microsoft Lists
  2. Add Modern Calendar to a SharePoint Online page  

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

 

The only hiccup is you can't drop the event as an actual event to your calendar like you can with spo calendar.. so not really a fix.

Hi, I am not sure if it was answered or not but I want to mention that adding the link in an embed WebPart the calendar with the URL + the query parameter IsDig=1 works for me.

One consideration, the IsDig is case sentitive.

 

e.g: https://mytenant.sharepoint.com/sites/mysite//Lists/Events/Calendar.aspx?IsDlg=1

 

In this case it removes the navigation, hides the ribbon at the top and the side menu. 

Thanks

 

@Toby McDaid