KB User's Guide - General Info - Embed an Office 365 Calendar in a Document

Step 1 - Open a New KB Document

1. Go to the KB Admin Tools and open a New Document and make sure you're in the HTML editor

Step 2 - Copy this iFrame Snippet into the HTML editor of your KB document

<p></p>
<div style="text-align: center;">
<p><iframe src="XXX" <p="" width="990" height="600">Your browser does not support iframes. Please go to 
<a href="http://ReplaceThisURL.com">Important Calendar</a> to View this Calendar</p>
</iframe></p>
</div>
<p></p>

Customize this iFrame Snippet

• Replace the XXX with the O365 embed code
• Adjust the width (e.g. width="990") and height (e.g. height="600") of your calendar. These settings will not result in a horizontal nor vertical scroll bar in the iFrame. Adjusting them to be smaller may result in scroll bars in the iFrame.
• Customize the message your users whose browsers do not support iFrames will see instead of seeing the calendar. You can customize the message text and/ or the url to which you will refer those users.

Step 3 - Get O365 Embed Code

1. Open O365 Calendar.
2. Right-click on the gear icon in the upper right corner.
3. A navigation panel will open, look for a section called Your app settings.
4. Select Calendar.
5. The Calendar Options screen will open.
6. Navigate to Calendar > Publish Calendar.
7. In the Select a Calendar field, click on the dropdown menu and select the calendar you wish to embed.
8. In the Select permissions field, click on the appropriate permissions setting.
9. You will see two lines of greyed out embed code: hover over the line that ends with HTML and right-click.
   
10. Select the "Copy Link Location" option from the menu that appears.
11. You know have the O365 embed code copied on your "clipboard".

Step 4 - Paste the O365 embed code

1. In the new KB document that has the HTML editor enabled, locate the XXX in the iFrame code snippet.
• Example:

• <iframe src="XXX" ..."="">

2. Highlight the XXX in the KB Doc HTML editor.
3. Right-click and click on "Paste" in the menu that appears, essentially pasting the O365 embed code on your clipboard
   • Make sure the O365 embed code is wrapped in double quotes ("").
   • Make sure the O365 embed code completely replaces the XXX placeholder.

4. Next, you may modify the width and height of the calendar. Please know that the current settings in the snippet do not yield neither a horizontal nor vertical scroll bar. Making the calendar smaller *may* result in scroll bar(s).
5. Finally, you may modify the message that users whose browsers DO NOT support iFrames will receive. Update the message and the URL directing those users to the calendar you intended them to see.
6. From here, follow your KB Group's workflow for publishing KB documents.
7. We recommend that this document be set to the Priority of "Exclude from search".

Step 5 - Create a Custom Content Module in which to Display the O365 Calendar.

1. Follow the directions in this document to create a Custom Content module.

See Also:

• KB User's Guide - General Info - Embed a Google Calendar into a Document