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

media_1317318231054.png

Go to: http://www.calendar.google.com and login with your login and password.

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

media_1317318334676.png

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

Create New Calendar

media_1317318521603.png

Click “Create New Calendar”

Set up the new calendar

media_1317318667508.png

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

media_1317319011583.png

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

media_1317319155284.png

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

media_1317319422685.png

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

media_1317319685090.png

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

Paste the code

media_1317319837478.png

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. 🙂

Please like & share:
error