Follow

Embedding a Google Calendar

These are the steps to embed a Google Calendar in your website using the Text/Graphic Editor tool.

These instructions will work on:

  • Primary pages - Main Body & Right Side
  • Faculty Pages  - Main Body & Right Side

Make the Google Calendar Public

Make the Google Calendar Public

Make sure the calendar to be embedded is public. Skip these steps if the calendar is already public.

  • In the "Calendar Settings" select the Share this Calendar tab
  • Check the Share this calendar with others option
  • Then check Make this calendar public
  • Click the Save button

Getting the Embed Code

Getting the Embed Code

In the "Calendar Settings" select the Calendar Detail tab. Working in the Embed This Calendar section click the Customize the color, size and other options link.

Customizing the embed code.

  1. Leave the Calendar Title blank. Use the tool heading in the Text/Graphic Editor instead.
  2. For a clean look uncheck the options in the Show section. If more than one calendar will be displayed leave the "Calendar List" option checked. A small arrow will display in the upper right of the calendar allowing the user to select a specific calendar. Experiment with the other options until you are satisified with the way the calendar displays.
  3. The Default View should be set to "Agenda" if the embedded calendar will appear in the right side bar. Calendars embedded in the main body of the page could be any of the three views.
  4. Width and Height - 200 pixels is the maximum width for a calendar embed in the right side bar. This may vary if your site is customized. The height can vary depending on the number of tools being used on the page. The embed code will put in a vertical scroll bar, and a horizontal one if it is needed.
  5. Check the Calendars to Display. If more than one calendar is checked  you may want the "Calendar List" option checked as mentioned in step 2.
  6. Select and copy (CTRL-C) the embed code. Make sure to click the Update HTML button any time you make a change in the options.

Putting the Embed Code on a CMS4Schools Web Page

Putting the Embed Code on a CMS4Schools Web Page

Add a Text/Graphic Editor to the Right Side Bar or Main Body of a page. This example will use the Right Side Bar but the steps are the same for the Main Body.

Click the "Source" option in the upper left of the text editor.

Click in the Text editor and paste the embed code (CTRL-V). Click button at the bottom the the screen to save your work. The text on the button varies depending on the location of the Text/Graphic Editor and whether the tool is being added to the page or being updated.

Use the Tool Heading to Title the Calendar

Use the Tool Heading to Title the Calendar
  • Click the edit link
  • Key in the title you want to display - in this exmaple "Upcoming Events" was entered. This can be seen in the final screen shot.
  • Click Save.

Screen Shot of Embedded Google Calendar

Screen Shot of Embedded Google Calendar
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk