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

    1. Create a Google Account

    Sign Into your Calendar

    1. Sign into Google Calendar
    2. 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.
    3. GoogleCal_main.png

    Create Events for your Calendar

    1. To create an event, click on the Create button on the upper left of the screen.
    2. createcal.png

    3. 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. 
    4. new_cal_web_form.png

    Navigation to get Embed Code

    1. 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.
    2. clickonsettingsicon.png

    3. Click on the gear icon and select "Settings" from the dropdown menu.
    4. selectsettingsfromdropdown.png

    5. 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.
    6. clickonthecalendarslink.png

    7. 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".
    8. clickonyoucalendar.png

    9. 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.
    10. copyyourcalendarscode.png

    Embed Google Calendar Code into a KB Document

    1. Create a new KB document.
    2. Fill in the required fields; Title, Keywords, Summary, Body.
    3. 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.
    4. iframecodeinbody.png

    5. To center the Google Calendar in your content module, highlight all the iframe code and either:
      • click on the center icon center_design_editor.png if you are in the Design Mode Editor
      • or

      • the Center button center_HTML_mode.png if you are in the HTML editor.

    6. Select the appropriate Search Priority, Topic(s), SiteAccess and Status.
    7. Click on the Submit button to save your changes.

    Google Calendar as a Content Module

    1. Please refer to the Content Module section, especially this section describing how to display a single document in custom content module.
    2. Here is an example of a Google Calendar as a Custom Content Module.

    Keywords:calendar embed display show events meetings weekly monthly custom content module single document   Doc ID:61934
    Owner:Teresa A.Group:KB User's Guide
    Created:2016-03-15 15:19 CDTUpdated:2016-08-29 16:33 CDT
    Sites:KB User's Guide
    Feedback:  0   0