the-calendar.net

Outlook

How to Embed an Outlook Calendar on a Website

Outlook lets you publish a calendar to a URL, then embed it via iframe. Unlike Google, Outlook's native widget is fairly plain — third-party tools fill the gap if you need a richer view.

Step-by-step

  1. Publish the calendar first: Outlook on the web → Settings → Calendar → Shared calendars → Publish a calendar.
  2. Set the detail level to Can view all details (or less, depending on privacy).
  3. Copy the HTML URL that appears.
  4. On your website, embed it via iframe: <iframe src="YOUR-HTML-URL" width="800" height="600" frameborder="0"></iframe>
  5. For a more designed look, pass the ICS URL (also shown when you publish) to a third-party widget like FullCalendar or Add to Calendar Button.

Make it responsive

Wrap the iframe in a container: position: relative; padding-bottom: 75%; height: 0; + iframe absolute-positioned at 100%/100%. That holds a 4:3 ratio on every screen.

Embedding private calendars

The embed only works for published (public) calendars. To embed a private one, build a custom solution using the Microsoft Graph API and an authenticated server — Outlook doesn't support guest-view embeds otherwise.

Related guides

Frequently asked questions

How often does the embedded view update?
It pulls live from your Outlook calendar — typically within a few minutes for new events.
Can I show only one shared calendar from a tenant?
Yes — each calendar publishes its own URL. Publish only the one you want to share.