December 27, 2012

Embed a Google Calendar into a WordPress page or post

By University of Washington

On this page:

If you need help with creating a Google Calendar, please read their help article Create a new calendar in the Google Calendar Help pages.


Embed a Google Calendar into a page or post

If you would like to embed a Google Calendar into a page or post on your UW WordPress site, follow these steps:

  1. Log into your Google account and open the Calendar page.
  2. Click on the arrow next to your calendar name and select Calendar settings from the drop-down menu.
    • Embed Google Calendar: Select Calendar settings
  3. Click the Share this Calendar tab.
    • Embed Google Calendar: Click Share this Calendar tab
  4. Check the Make this calendar public check box and click on the Save button.
    • Embed Google Calendar: Check the Make this calendar public box
  5. A warning dialog box will appear and ask if you’re sure you would like to make your calendar available to the public. Click Yes and you will be directed back to the main calendar page.
    • Embed Google Calendar: Warning dialog
  6. Open Calendar settings again (see Step 2). Make sure you are on the Calendar Details tab.
    • Embed Google Calendar: Open Calendar Details tab
  7. Lower on the Calendar Details page, you will find a section titled “Embed This Calendar.” Copy the entire embed code that begins with “<iframe src.”
    • Embed Google Calendar: Copy the iFrame code
      Click on image to enlarge.
  8. From your WordPress CMS, edit the page or post on your site where you want to embed your Google Calendar.
  9. Paste the iFrame code directly into your HTML editor. (You can switch between the Visual and HTML editors using the tab at the top-right of the editing box.)
    • Embed Google Calendar: Paste the iFrame code
      Click on image to enlarge.
  10. Publish or save the changes you made to your page or post.
    • Note: You may notice that your iFrame code changed into a shortcode after you saved your page or post:
    • Embed Google Calendar: Shortcode
      Click on image to enlarge.
    • iFrame code is generally not allowed in UW WordPress installs because of security risks. The Marketing Web Team has made an exception for Google iFrames, which will be converted into a shortcode after you save your changes.

Below is an example of what an embedded calendar may look like on your UW WordPress site.

Embed Google Calendar: How Calendar will look

Click on image to enlarge.


Embed a Google Calendar into your sidebar

If you would like to embed a Google Calendar into the right-hand sidebar of your UW WordPress site, follow these steps:

  1. Log into your Google account and open the Calendar page.
  2. Click on the arrow next to your calendar name and select Calendar settings from the drop-down menu.
    • Embed Google Calendar: Select Calendar settings
  3. Click the Share this Calendar tab.
    • Embed Google Calendar: Click Share this Calendar tab
  4. Check the Make this calendar public check box and click on the Save button.
    • Embed Google Calendar: Check the Make this calendar public box
  5. A warning dialog box will appear and ask if you’re sure you would like to make your calendar available to the public. Click Yes and you will be directed back to the main calendar page.
    • Embed Google Calendar: Warning dialog
  6. Open Calendar settings again (see Step 2). Make sure you are on the Calendar Details tab.
    • Embed Google Calendar: Open Calendar Details tab
  7. Lower on the Calendar Details page, you will find a section titled “Embed This Calendar.” Click the Customize the color, size, and other options link.
    • Embed Google Calendar: Click Customize... link
      Click on image to enlarge.
  8. You will now be on a page titled “Google Embeddable Calendar Helper.”
    • Embed Google Calendar: Customization Page
      Click on image to enlarge.
  9. Change the Width to 299 (this is the width of our the UW WordPress Theme sidebar). You may also edit the height to whatever number you desire.
    • Embed Google Calendar: Edit Width
  10. You may notice that the upper area of your calendar has information that is now truncated and displaying incorrectly. This is because you’ve decreased the calendar width to a point too small to display all of Google’s default information.
    • Embed Google Calendar: Truncated Display
  11. Uncheck some boxes under the Show section to create more space at the top of your calendar.
    • Embed Google Calendar: Uncheck boxes under Show
  12. When you have finished customizing your calendar, copy the entire embed code from the field at the top of the page.
    • Embed Google Calendar: Copy iFrame code
  13. From your WordPress Dashboard, navigate to Appearance > Widgets.
    • Embed Google Calendar: Apparence > Widgets
  14. Drag a new Text Widget to your sidebar.
    • Embed Google Calendar: Add New Text Widget
      Click on image to enlarge.
  15. Add a title to your widget (optional).
  16. Paste the iFrame shortcode into the main box of your text widget.
    • Embed Google Calendar: Paste iFrame code
  17. Click the Save button. Your calendar will now appear in the sidebar of your live site.
    • Note: You may notice that your iFrame code changed into a shortcode after you saved your page or post:
    • Embed Google Calendar: Shortcode in Sidebar
    • iFrame code is generally not allowed in UW WordPress installs because of security risks. The Marketing Web Team has made an exception for Google iFrames, which will be converted into a shortcode after you save your changes.

Below is an example of what an embedded calendar may look like in the sidebar of your UW WordPress site.

Embed Google Calendar: Sidebar

Click on image to enlarge.

Comments are closed.