0

Any way to embed Modern calendars (like we use to classic) in a Modern pages? I see the events webpart, 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...

0

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.

| improve this answer | |
0

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

testcalendar.jpg

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>

html.jpg2.

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.