calendar web part on modern pages

I'm having this exact problem with my calendar. I'm yet to try the script solution posted here, but I found an interim solution on reddit which may help some here: 

Add ?isdlg=1 or &isdlg=1 to the end of your embedded address/URL. This popped up a bit of a spacey calendar, but it's better than the whole page. Hopefully Microsoft fixes this problem properly soon.

Below is an answer I received from Microsoft on a modification to the javascript in order to display the calendar in a better manner.  I didn't want to modify the code for something that is fairly trivial for me so I can't say if this works or not.  I also asked them what changed in the last week or so and they didn't have a response for that.

Microsoft Answer:

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>