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