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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%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%3CLINGO-SUB%20id%3D%22lingo-sub-1569648%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-1569648%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20for%20your%20post.%3C%2FP%3E%3CP%3EThe%20link%20to%20the%20react%20calendar%20solution%20file%20is%20no%20longer%20working.%3C%2FP%3E%3CP%3EAny%20chance%20you%20can%20publish%20the%20file%20again%3F%20(I%20don't%20know%20how%20to%20build%20the%20solution%20file)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1611659%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-1611659%22%20slang%3D%22en-US%22%3E%3CP%3ECAan%20you%20please%20show%20me%20how%20to%20install%20the%20files%20needed%20to%20get%20a%20full%20calendar%20view%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1612239%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-1612239%22%20slang%3D%22en-US%22%3EApparently%20the%20link%20broke%20for%20some%20reason.%20Updated%20link%20to%20the%20sp%20package%20file.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fwebbtech365-my.sharepoint.com%2F%3Au%3A%2Fg%2Fpersonal%2Fcwebb_webbtech_org%2FEeK9Cof1TMVGowouuAGA7UwB6_AMAeGqjAvHgvOfPjwoDQ%3Fe%3D8ARZrc%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwebbtech365-my.sharepoint.com%2F%3Au%3A%2Fg%2Fpersonal%2Fcwebb_webbtech_org%2FEeK9Cof1TMVGowouuAGA7UwB6_AMAeGqjAvHgvOfPjwoDQ%3Fe%3D8ARZrc%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EYou%20can%20install%20it%20by%20using%20SharePoint%20Online%20this%20article%20has%20an%20overview.%20%3CA%20href%3D%22https%3A%2F%2Fwww.netwoven.com%2F2015%2F04%2F28%2Fdeploying-custom-apps-in-sharepoint-online-office-365-tenant%2F%23%3A~%3Atext%3D%2520Deploying%2520Custom%2520Apps%2520in%2520SharePoint%2520Online%2520%2528Office%2Cfor%2520SharePoint%2520to%2520deploy%2520your%2520custom...%2520More%2520%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.netwoven.com%2F2015%2F04%2F28%2Fdeploying-custom-apps-in-sharepoint-online-office-365-tenant%2F%23%3A~%3Atext%3D%2520Deploying%2520Custom%2520Apps%2520in%2520SharePoint%2520Online%2520%2528Office%2Cfor%2520SharePoint%2520to%2520deploy%2520your%2520custom...%2520More%2520%3C%2FA%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1612372%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-1612372%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F64907%22%20target%3D%22_blank%22%3E%40Chris%3C%2FA%3E%20-%20Thank%20you%20-%20much%20appreciated!!!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1615049%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-1615049%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3B%20I%20downloaded%20the%20sppkg%20and%20installed%20it%20on%20my%20app%20catalog%2C%20but%20it%20is%20not%20available%20on%20my%20site.%20I%20did%20check%20to%20install%20it%20on%20sites%20in%20my%20tenant%20but%20when%20I%20try%20to%20add%20it%20to%20my%20site%20it%20is%20not%20available%20in%20the%20Add%20Apps-%3FApps%20section%20on%20the%20site.%20Am%20I%20missing%20something%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20and%20if%20it%20works%2C%20it%20would%20be%20a%20great%20feature.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1615086%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-1615086%22%20slang%3D%22en-US%22%3EIt's%20not%20an%20app%2C%20it's%20a%20web%20part%2C%20web%20parts%20are%20just%20deployed%20as%20an%20app%20feature.%20The%20web%20part%20uses%20existing%20event%20lists%20to%20render%20the%20calendar%20in%20a%20web%20part.%20So%20what%20I%20did%20was%20create%20a%20%22Page%22%20on%20my%20site%20with%20just%20that%20web%20part%20on%20it%20with%20the%20settings%20connected%20to%20my%20existing%20event%20list.%20Then%20you%20can%20add%20that%20page%20to%20Teams.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1615117%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-1615117%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3BThank%20you%20for%20your%20quick%20reply.%20I%20did%20upload%20it%20to%20my%20app%20catalog%20and%20then%20made%20sure%20to%20deploy%20it%20to%20all%20sites.%20But%20when%20I%20try%20to%20edit%20the%20modern%20page%20on%20my%20site%2C%20this%20webpart%20is%20not%20available%20to%20be%20added%20to%20the%20page.%20I%20also%20tried%20to%20create%20a%20Webpart%20page%20(instead%20of%20a%20modern%20site%20page)%20and%20then%20I%20found%20it%20listed%20as%20Calendar%20in%20the%20Other%20section.%20So%20is%20it%20not%20possible%20to%20add%20it%20to%20a%20modern%20page%3F%20Able%20to%20add%20to%20a%20modern%20page%20would%20be%20great!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1615151%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-1615151%22%20slang%3D%22en-US%22%3EYeah%20you%20should%20be%20able%20too.%20I%20don%E2%80%99t%20think%20it%20has%20to%20be%20enabled%20per%20site%20but%20it%E2%80%99s%20been%20months%20since%20I%20installed%20it%20but%20it%20did%20work%20for%20modern%20pages.%20I%20noticed%20they%20had%20an%20update%20a%20few%20month%20ago%20for%20newer%20spfx.%20Not%20sure%20if%20it%E2%80%99s%20required%20to%20work%20I%20need%20to%20go%20see%20if%20mine%20still%20works%20and%20try%20installing%20on%20my%20other%20tenant%20tomorrow%20I%20guess.%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

15 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/cwebb_webbtech_org/EeK9Cof1TMVGowouuAGA7UwB6_AM...

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

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

Highlighted

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

Highlighted
Highlighted
Highlighted

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

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

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

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