How to Embed an Outlook Calendar into Your Website – Office 365

Articles, Blog

How to Embed an Outlook Calendar into Your Website – Office 365

How to Embed an Outlook Calendar into Your Website – Office 365


Hi and welcome to a Pen Publishing Interactive Office 365 Video. In this video I will be covering how to embed an Outlook calendar into your website. So let’s get started. First off you will need to log into office in a browser. The easiest way to do that is to go to portal.office.com Once you are there and logged in you’ll be at this screen. One thing to note, I’m going to assume you already have an Outlook calendar made for the purpose of this video and now we need to publish that. So first click the Settings button here in the top right. Now go down to the calendar button here under your app settings and this will bring you to an options menu. Over here on the left-hand side, we need to go to shared calendars and then the calendar publishing and here you can select the calendar you would like to publish on to your website. In this case I only have one calendar so there aren’t any other options in the drop-down. Next we have a couple permissions to choose from. Availability only means that a calendar will only show you as busy and it will show the times that you are not available but it doesn’t give any other details about each event on your calendar. Limited details will tell also the location and the title of the event but it won’t say any event details and full details will say everything about the event including location title and so forth. Depending upon your business needs any of these could be useful. Like if you’re sharing business events, you’ll probably want full details. Whereas if you have a calendar for client meetings, you might only want availability only. For this video, I’ll do full details for the permissions. Once you’ve chosen that go ahead and click Save. Here you’ll see you have an HTML link and an ICS link. I’m going to use the HTML link in this case. So go ahead and click on that and it will open up your calendar you’re going to publish into your website. So click in the address bar here and right click copy and Make sure you get the whole address for the calendar. Now go to your website and a page you would like to put it on. For this case I’m using FlipperSiteDeveloper CMS, so I’m on a blank page currently. I’m just going to click on edit content and here I’m going to go to the HTML content and an HTML view and I’m going to paste in the outlook link we got from before and in order to make this work in the website, we need to put it into an iframe, so I have some code already prepared for that. Now we’re going to put in the Outlook link right here. If you need the iframe code, you can go ahead and pause the video here and copy that down, and now once you’ve done that go ahead and press Save Changes, and now you will see your calendar has been embedded into a website. One problem you might run into is the height and width of the iframe depending upon your website. You may need to fine-tune those settings. As always if you have any questions about the services we provide or other products Feel free to visit us at penpublishing.com You can contact us at [email protected] and finally if you’re on Facebook or Twitter, feel free to leave a like and if you’re watching this on YouTube, feel free to subscribe. Thanks for watching and until next time.

8 thoughts on How to Embed an Outlook Calendar into Your Website – Office 365

  1. The only problem I'm having is that the calendar forces the page to anchor to the calendar section on the page. If, say, you put your calendar towards the end of the long page, after the page is fully loaded it goes down to the calendar. There is something in that calendar embeded code that forces it, and I don't know how to stop it from doing it.

  2. Well done, this works great. Only issue, I cannot add new items to the calendar or edit any items. Are there something I'm missing ?

  3. Great video but after I go to "Shared Calendars" and then "Calendar Publishing", when I go to designate the "allowed details" in the "Select Permissions" drop down box- the only options that show up are "availability" and "not shared"? When I embed the link in my website, it does show the calendar but not the details of any events no matter which of the two choices I select…. The "limited details" and "full details" choices do not show up. Any idea what's going on here? Any help would be greatly appreciated! Garry D.

  4. great video… just one thing… how can i remove the top line showing the calendar owner name on the left. thanks

  5. Is it possible to change the default view? Mine starts with the "Month" view, but I want it to start with the "Day" view instead.

  6. Hey, can I get the published url through the Oulook API? I would like to be able to use OAuth to access any users calendar and publish it for them when they log in. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *