Forum Discussion
calendar web part on modern pages
This is what I ultimately got working for me, a combination of suggestions here and other google searches. There's still a bit of excess whitespace above the calendar I can't get rid of, but I'm happy as is.
To strip the Ribbon (browse, page, etc...) from the embedded calendar, then on the Calendar page, add a Content Editor Web part and edit the CEW part's source to be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideItAll");
function hideItAll(){
if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
$("#s4-ribbonrow").hide(); //ribbon bar
}
}
</script><br/>
Then you can embed using:
<iframe width="100%" height="625" src="https://XXX.sharepoint.com/sites/XXX/Lists/CALENDAR/calendar.aspx?Minimized=true&?isdlg=1"></iframe>
Dsienkowskiquite nice script there.
Just tried that on a modern page I am working on for someone and the calendar shows nicely. Why M$ can't just get this done through a simple webpart we will never know (until they eventually decide to listen to us customers). But people like yourself help work around these issues with scripts like these. Thanks!
- Sorry for not replying quicker. I’ve been on a long vacation until now. I’ll get the steps used in this and put them upon this thread shortly.
I may not be 100% correct on this, but I think it should work because Modern calendars are the same as old SharePoint calendars:
On your old SharePoint calendar, go into Edit page mode > click on the Insert tab > click on the Web Part button > Find and add the Content Editor Web part (I had to import it because it's not native in Modern SharePoint).
Once the CEW is added, click within the highlighted area below, then click the Edit Source button in the ribbon bar.
Copy&paste the code into the HTML Source window then click OK.
Exit/Save the editing. Copy the URL of this calendar page.
Now, go to the Modern page you want to embed the calendar. Can be an existing page, a new page, whatever you want.
On that page, add a new embed section. In the Website address or embed code box, copy paste:
<iframe width="100%" height="625" src="YOUR-CALENDAR-URL?Minimized=true&?isdlg=1"></iframe>replacing the YOUR-CALENDAR-URL portion with the URL of your calendar from above.
I'm trying to understand how to do this between old SharePoint and modern pages. Would you mind stepping through in more detail? I have an existing calendar in old sharepoint that I want to display in modern pages. Do I create a new page in modern and then add a custom web part with the code and then add an embedded iframe on that page?
Thank you in advance!
