This lesson will walk you through the process of creating calendars within a Gmail (Google Calendar) Account. This allows you to view all the calendars from one location or set them up on your website for viewing individual calendars. This tutorial will also walk you through fetching and using the HTML code from Google Calendars in your WordPress Widgets.

Login to Gmail/Google Calendar


Go to: and login with your login and password.

Go to Options (the little gear-shaped icon), then “Calendar settings”


On the “Calendar Settings” Page, Click the “Calendars” Tab.

Create New Calendar


Click “Create New Calendar”

Set up the new calendar


Enter in the Calendar Name, Description, and Location (optional). Choose the Country and Time Zone. Make the Calendar Public. Click “Create Calendar”. You will get a warning message regarding making the calendar Public. If it is a calendar that you are placing on your website, click OK/YES.

Navigate to your calendar


Go to Options (the gear icon), then “Calendar settings.” Then, click on the “Calendars” Tab. You will see your calendar listed. Click the link for your calendar.

Customize the Calendar


Find the section that says ‘Embed This Calendar.” Click the link that says “Customize the color, size, and other options.” You can customize what shows, the size, the colors, etc…

Save your Customizations and Snag the Code


After you have the settings the way you want them, Click “Update HTML” so your changes will be reflected in the code. Then, Copy the HTML Code in the box and paste it into a text document, like “Notepad.” (This step is important so you don’t lose the code while navigating to your WordPress site. It is so easy to accidentally copy a link or something and then your code is gone.)

Login to WordPress & Go to Widgets


In your WordPress Dashboard, Find the Appearance Tab. Then, Click “Widgets.”

Paste the code


Find the widget in which you want the calendar to appear. Go back to your text document and copy your HTML code again. Paste it in the box. Click Save. When you check your website, it should reflect the new code you added for the calendar. 🙂

Pin It on Pinterest