Modern Sharepoint and Calendar embed?

Question

Any way to embed Modern calendars (like we use to classic) in a Modern pages? I see the events web part, but not the same?

Any way to change what fields are shown in the day box in a month view? We use to do this with JS/CSS injection, but I guess MSFT killed that.

Basically we are trying to build a calendar where user can schedule themselves into rooms at given times and there will be some business rules like participants (custom persons field) can't be scheduled twice at the same time.

Seems more has to be custom with Modern.

Answer 1

Correct if you want a modern calendar you'll need to build and deploy the PnP SPFx example solution available in github, or build you own if you wish.

There have been hints of MS releasing a default modern calendar soon, looks like it may be part of the new MS Lists functionality which was announced yesterday at MS Build 2020. Look through the screenshots and comments on the tech community post for hints.

Answer 2

If only want to display the calendar in the modern experience page like this:

You can try these below steps:

1.On the calendar page(which you want to display on the modern page), edit the page, add one content edit web part and insert below JavaScript code in the content edit web part.

<script>

function  HideElementInFrame(Id)

{

     ele = window.document.getElementById(Id);

     if(ele)

     {

         ele.style.display="none";

     }

}



var url = new URL(window.document.location.href);

var IsInIframe = url.searchParams.get("IsInIframe");

if(IsInIframe==1)

{

    HideElementInFrame('s4-ribbonrow');

    HideElementInFrame('s4-titlerow');

    HideElementInFrame('zz12_V4QuickLaunchMenu');

    HideElementInFrame('zz11_RootAspMenu');

    HideElementInFrame('DeltaPlaceHolderSearchArea');

    HideElementInFrame('suiteBarTop');   

}

</script>

2.On the modern page, embed the calendar page with below code,

<iframe src="https://yourcompany.sharepoint.com/calendar.aspx?IsInIframe=1" scrolling="no"  width="100%" height="1000px">

</iframe>

Please refer to the reply from Josh Health in this similar post:

https://techcommunity.microsoft.com/t5/sharepoint/calendar-web-part-on-modern-pages/m-p/161291

Answer 3

Microsoft has released modern calendar views in SharePoint online recently.

Using this new feature you can create calendar views on any modern SharePoint online / Microsoft lists.

Then you can embed this calendar view on modern pages using Embed web part. For more information and step by step process check below articles:

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