KB User's Guide - Documents Tab - Embed Google Calendar
This document will show you how to create a Google Calendar and then how to embed it into a KB Document.
Create a Google Account
Sign Into your Calendar
- Sign into Google Calendar
- Upon signing in, you will be led to a blank calendar screen. In the image below, our test account is looking at Valentine's week of 2017.
Create Events for your Calendar
- To create an event, click on the Create button on the upper left of the screen.
- This will lead to a web form where the event title field is highlighted, inviting you to enter your own Event Title. Please complete this form and click on the Save button.
Navigation to get Embed Code
- Once your calendar is ready to be embedded, click on the "gear" looking icon on the upper right of the screen. If you hover over this icon, the word, Settings, will appear. The image below shows our test calendar with the gear icon circled in red. The mouse, when over the gear icon reveals the Settings label.
- Click on the gear icon and select "Settings" from the dropdown menu.
- This will lead to the Calendar Settings screen which, by default, displays all the options under the General link. Click on the Calendars link. In the image below, the Calendars link is circled in red.
- Scroll down to the My Calendars part of the screen. There you will find the name of your own calendar which appears as linked, click on that link. In the image below, the CALENDAR part of the screen is circled in red. A red arrow points to our test calendar link, "UWMadison WEST Team".
- This will lead to the Details screen of your calendar. Toward the bottom of screen is the Embed This Calendar section. In the text box in that section, you will see an iframe code. Copy that code. In the image below, the iframe code for our test calendar is circled in red.
Embed Google Calendar Code into a KB Document
- Create a new KB document.
- Fill in the required fields; Title, Keywords, Summary, Body.
- Paste the iframe code into the Body of the document. The calendar will display on the left side of the custom module. In the image below, the only thing displayed in Example Document for Embed Google Calendar: Move To Production Schedule is our test calendar.
- To center the Google Calendar in your content module, highlight all the iframe code and either:
- click on the center icon if you are in the Design Mode Editor
- the Center button if you are in the HTML editor.
Google Calendar as a Content Module
- Please refer to the Content Module section, especially this section describing how to display a single document in custom content module.
- Here is an example of a Google Calendar as a Custom Content Module.