Creating a Google Calendar

Advanced‎ > ‎

The IAAP Web Community sites have a built-in calendar that can be used to post upcoming events for your chapter or division. However, if you prefer, you can also embed a Google Calendar to your site to use instead. This tutorial will show you how.

Click here to see a live demonstration of a Google Calendar on a Web Community site.

Create a Google Account for your chapter/division

If your chapter or division does not already have a Google account setup, you'll need to do that first. Visit google.com/calendar and click the "Create an account" button.

Once you have created an account, you can follow the instructions from Google on how to use and manage your Google Calendar. What we'll be focusing on here is how to get that calendar onto your site.

Obtaining the Google Calendar embed code

Once your calendar is created and you've created any events you'd like to add, click on the "Calendar setting" link in the "Settings" dropdown menu in the upper-right corner of your screen.

Click the "Calendars" tab and then "Share this calendar."

From the share options, you'll need to check the "Make this calendar public" box so that other people will be able to view the calendar.

Next, click the "Calendar details" tab. You can change the name of the calendar, owner, description, time zone, etc., but the most important piece of information you'll need is the "Embed This Calendar" code. Note: You'll also want to update the Calendar Name field in the Calendar Details section because the email address used to create the calendar is used as default. Rename the calendar to reflect your chapter or division name.

Your code will look something like this:

<iframe src="http://www.google.com/calendar/embed?src=ben.iaaphq%40gmail.com&ctz=America/Chicago" style="border: 0" width="750" height="600" frameborder="0" scrolling="no"></iframe>

Note: We changed the width from the default 800 to 750. This will allow the calendar to fit better on your web community site. Copy and paste the code into Notepad or another text editor. This will be the HTML code we add to your site to display the calendar.

Preparing your calendar page

As we mentioned before, all web community sites come with a Calendar built in. So we'll need to disable that before we embed our Google calendar. From any page on your site, click the "Edit this Page" link and then the "Navigation" link along the top breadcrumb links.

Highlight the existing Calendar folder (on some sites it may be called "Events" instead of Calendar) in the Navigation section (you'll need to click on the text itself, not the folder icon) and click the "Edit" button.

At the bottom of the Navigation edit page, you'll see a section called "Show/Hide Navigation." Select the "Hide this navigation but leave its content on the site" option and click Save.

After you save, you will see the Calendar folder icon is greyed out, meaning the Calendar link will no longer appear on your site. With the Calendar folder still highlighted, click the "New" button in the Navigation editing options. This will create a new page folder below our default calendar.

Creating and embedding your Google Calendar page

Once the new folder has been created, name it "Google Calendar" and then click the "Edit" button with the new folder still highlighted.

Change the Navigation Title from "Google Calendar" to just "Calendar." Leave everything else as is and click Save.

With the new Calendar folder still selected, click the "New" button under the Content side of the page. This will create the content item where we will paste our calendar embed code.

Uncheck the "Show?" box so that the Calendar title does not appear on the page twice (It will already appear once because that's the name of our Navigation folder.

Move down to the content editing area. Click the "HTML" button at the bottom of the editor and then paste the code we copied earlier into the text area.

Click the "Design" button again and you should see your new calendar in the editing area.

Click Save to finish.

Navigate back to your website and you should see the "Calendar" link in your top navigation menu. Your calendar should look similar to this:

Click here to see a live demonstration of a Google Calendar on a Web Community site.

Note: Once your calendar is setup on your site, all events will need to be modified through the Google Calendar site. You can get there from your embedded calendar by clicking the "Google Calendar" button in the lower-right corner of the calendar.