These are the steps to embed a Google Calendar in your website using the Text/Graphic Editor tool.
Note: You can also import Google Calendars into the Calendar Admin to display the events alongside other events already on your calendar. See the Google Calendar Import/Integration article for more details.
These instructions will work on:
- Primary pages - Main Body & Right Side
- Faculty Pages - Main Body & Right Side
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
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.
- Leave the Calendar Title blank. Use the tool heading in the Text/Graphic Editor instead.
- 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.
- 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.
- 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.
- 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.
- 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
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 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
- 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.