Home

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

%3CLINGO-SUB%20id%3D%22lingo-sub-303238%22%20slang%3D%22en-US%22%3EDisplaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-303238%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20using%20a%20modern%20web%20page%20in%20SharePoint%20Online%20to%20display%20events.%20With%20the%20modern%20events%20web%20part%2C%20it%20only%20displays%20upcoming%20events%20as%20tiles.%20The%20people%20I'm%20building%20the%20site%20for%20would%20like%20their%20events%20web%20part%20to%20show%20a%20full%20grid%20view%20of%20the%20calendar%20month.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can't%20seem%20to%20find%20a%20way%20to%20do%20this%20in%20the%20modern%20experience.%20Would%20be%20great%20if%20anybody%20knows%20how%20I%20can%20do%20this%20(if%20it's%20possible)%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-303238%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECalendar%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EEvents%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-303621%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-303621%22%20slang%3D%22en-US%22%3ELast%20time%20I%20tried%20this%20it%20didn't%20work%2C%20but%20I%20think%20it%20was%20actually%20when%20you%20try%20to%20add%20a%20SharePoint%20page%20to%20a%20Teams%20tab%20with%20embed%20it%20won't%20work%20and%20throws%20Iframe%20error%20because%20this%20was%20the%20first%20thing%20that%20came%20to%20my%20mind%20too!%3CBR%20%2F%3E%3CBR%20%2F%3EAnyway%2C%20good%20solution!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-303586%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-303586%22%20slang%3D%22en-US%22%3EI%20got%20this%20working%20using%20the%20embed%20webpart.%20If%20you%20get%20the%20URL%20to%20the%20calendar%20view%20you%20want%20and%20append%20IsDlg%3D1%20then%20it%20removes%20the%20navigation%20and%20just%20leaves%20the%20calendar.%20It's%20not%20as%20good%20as%20an%20spfx%20webpart%20but%20may%20be%20an%20interim%20solution.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-303290%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-303290%22%20slang%3D%22en-US%22%3EOut%20of%20the%20Box%20it%E2%80%99s%20not%20possible%20in%20modern.%20You%E2%80%99ll%20have%20to%20look%20into%20a%20calendar%20spfx%20webpart%20and%20install%20it.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1204304%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1204304%22%20slang%3D%22en-US%22%3E%3CP%3EWould%20be%20good%20if%20it%20were%20an%20OTB%20solution%2C%20in%20particuar%20since%20available%20in%20classic%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1204748%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1204748%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F554844%22%20target%3D%22_blank%22%3E%40Wendy_Lumsden%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20is%20very%20easy%20to%20install.%20In%20fact%20let%20me%20see%20if%20I%20can%20just%20share%20the%20SharePoint%20package.%20You%20can%20add%20it%20to%20your%20app%20catalog(this%20needs%20setup%20if%20you%20don't%20have%20one)%20and%20you%20can%20have%20a%20modern%20calendar%20that%20ties%20to%20any%20event%20list%2C%20it%20works%20great%20actually.%20Added%20it%20to%20Teams%20too.%20You%20can%20edit%20the%20code%20for%20this%20and%20even%20make%20it%20a%20tab%20you%20can%20add%20to%20Teams%20as%20well%2C%20but%20I%20haven't%20done%20that%20just%20yet.%3C%2FP%3E%0A%3CP%3EGithub%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-calendar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-calendar%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELink%20to%20a%20pre-built%20solution%20file%3A%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwebbtech365-my.sharepoint.com%2F%3Au%3A%2Fg%2Fpersonal%2Fturismon_webbtech_org%2FEeK9Cof1TMVGowouuAGA7UwB6_AMAeGqjAvHgvOfPjwoDQ%3Fe%3DYzMlUG%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwebbtech365-my.sharepoint.com%2F%3Au%3A%2Fg%2Fpersonal%2Fturismon_webbtech_org%2FEeK9Cof1TMVGowouuAGA7UwB6_AMAeGqjAvHgvOfPjwoDQ%3Fe%3DYzMlUG%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1293943%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1293943%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F190211%22%20target%3D%22_blank%22%3E%40Toby%20McDaid%3C%2FA%3EYes%2C%20this%20feature%20is%20sadly%20missing.%20Yu%20can%20embed%20a%20calendar%20view%20using%20the%20EMBED%20web%20part%2C%20but%20I%20have%20never%20had%20very%20good%20results%20with%20that!%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1295700%22%20slang%3D%22en-US%22%3ERe%3A%20Displaying%20the%20events%20web%20part%20as%20a%20full%20calendar%20view%20of%20the%20month%20on%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1295700%22%20slang%3D%22en-US%22%3EThanks%20Toby%20-%20lets%20hope%20it%20is%20in%20the%20pipeline!%3C%2FLINGO-BODY%3E
Highlighted
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

7 Replies
Highlighted
Out of the Box it’s not possible in modern. You’ll have to look into a calendar spfx webpart and install it.
Highlighted
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.
Highlighted
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!
Highlighted

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

Highlighted

@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/turismon_webbtech_org/EeK9Cof1TMVGowouuAGA7UwB6...

Highlighted

@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! 

Highlighted
Thanks Toby - lets hope it is in the pipeline!