calendar web part on modern pages

[Malene Friborg]

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 :)

[#2]

It is not on their roadmap , but this guy is working on creating one, https://twitter.com/joaojmendes/status/1132373553318420485?s=20

@joao mendes

[#3]

It's so annoying this isn't an inbuilt thing. Telling people not to use reoccurring appointments on the Events calendar is odd.

[#4]

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?

---

---

[#5]

@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!

[#6]

@Josef Hermes sorry to share some bad news, but Microsoft has stated that they are not working on a modern calendar for SPO

[#7]

Ahh too bad, but thanks for the update!

[#8]

@Dean Gross Thanks for the update, but as Josef said: Too bad :( 

[#9]

@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.

[#10]

Glad it helped!

[#11]

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.

[#12]

@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>

[#13]

@Josef Hermes 

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.

[#14]

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 

[#15]

This one works for me! Thanks!!

[#16]

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>

[#17]

@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!

[#18]

Hi All, 

I just released a significant update to this free calendar consolidation PowerApp template.

• For PowerApp newbies, It now includes a quick step-by-step video tutorial on how to change my data sources to your calendars.
• Bug fix with how SharePoint handles All Day events vs scheduled events--where some events didn't show correct time.
• New landscape version that will take up less page real estate on SharePoint page.
• Design alignment with look & feel of Calendar events in SharePoint.

Check out the update release notes

[#19]

@CANDEman403 

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!

[#20]

@rdonato 

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.

[#21]

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