Feb 20 2018 03:47 AM
Any chance we can get an ordinary calendar web part on our modern pages?
Events web part is not enough and the group calendar is only for, well, groups :)
We have the need for a modern page with a monthly calendar showing.
Thanks :)
May 27 2019 12:43 PM
May 28 2019 01:21 AM
Jun 23 2019 10:53 PM - edited Jun 23 2019 11:01 PM
HIi @Josef Hermes I've tried out the embed code, but I am getting too much white space with my calendar. Is there any work around so that there is no space at the bottom of the web part? and 1 more problem is if I click on red marked area whole top menu is appearing which I dont want and there is no way to close it. I had to refresh the page then only it ill disappear. Any idea how to resolve this?
Jul 16 2019 01:33 AM
@Rajrup40 Sorry, I don't know any solution for that. We also have these problems. Lets hope Microsoft will release a modern calander webpart soon!
Jul 16 2019 03:08 AM
@Josef Hermes sorry to share some bad news, but Microsoft has stated that they are not working on a modern calendar for SPO
Jul 16 2019 04:07 AM
@Dean Gross Thanks for the update, but as Josef said: Too bad :(
Jul 16 2019 06:23 AM
@Dean Gross too bad indeed but I could see it very hard to display nicely on a phone. Our work around is linking it from the home page to the classic web part but noticed the quick launch bar is not always the same jumping between modern and classic pages.
Aug 20 2019 09:07 PM
I really do need this too!! We have many calendars on migrated sites that need to be displayed but they are not ready to jump to group calendars or only show events on a page.
Sep 03 2019 06:24 AM
@Rajrup40 I just discovered a different URL code, that seems to limit the white space and also seems to fix the menu problem. The URL extention is ?Minimized=true, so for example the embedded URL wil be
<iframe src="<a href="https://yourcompany.sharepoint.com/sites/site/Lists/Agenda/calendar.aspx?Minimized=true" target="_blank">https://yourcompany.sharepoint.com/sites/site/Lists/Agenda/calendar.aspx?Minimized=true</a>" width="100%" height="700px"></iframe>
Sep 09 2019 09:06 AM
That looks promising. My site won't accept the double listing of the site info as your instructions show, but it does like it when I show the location only once. Mine is kind of a hybrid of other information shared in this post. Here is the modified form of what I am using.
<iframe width="100%" height="625" src="http://yourcompany.sharepoint.com/sites/site/lists/Calendar/calendar.aspx?minimized=true"></iframe>
It gives me the whole calendar. I have to scroll to see the right half, but the scroll is there and it does look similar to the classic look with all the items from my calendar on it. So, just an option. Maybe someone can fine tune this embeded script to make it work even better.
Sep 24 2019 02:50 AM
Hi @GeorgeIII ,
Not working as expected, Not single solution working as expected, Microsoft might come in future with modern calendar webpart. Calendar webpart is very important because many organizations want it for Team calendar, leaves, time sheet purpose. Microsoft please do it.
Thanks,
Swapnil
Oct 10 2019 05:50 AM
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>
Nov 07 2019 02:31 PM
@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!
Nov 22 2019 07:44 AM
Hi All,
I just released a significant update to this free calendar consolidation PowerApp template.
Check out the update release notes
Dec 23 2019 09:49 AM
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!
Dec 26 2019 09:37 AM
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.
Jan 03 2020 07:38 AM
Hi Josh, @Josh Heath
I am also attempting to get the full view of the calendar on to my modern SharePoint site. Once I click Edit Page, I do not see the Edit Source button to edit/enter a JavaScript code under HTML Source. See image below. Please let me know if I am missing a step?
Thanks,
Mahmuda