How to Embed a Dynamic Calendar on your Web Page using Google Calendars

Calendars on your Web or Blog

Google Calendar is part of the suite of free web applications provided by Google. The Google Calendar application allows you to create and share one or more calendars that include important events, appointments, and meetings. Google Mail (Gmail) users will appreciate that Google Calendar is integrated (allows you to create an event on your calendar using just a couple of clicks, right from Gmail). Google Calendar makes organizing your schedule easy and fun, and reminders for important happenings may be sent to e-mail or even to your mobile phone. Calendars may be shared, accessed via mobile phone, or even published using a variety of flexible formats. In this article, I'll provide an overview of embedding your calendar(s) into your web site. Google makes embedding your calendar quick and painless, and you have a variety of format options so that you can provide a very polished and customized look to the embedded calendar. This is great for individuals that want to publish a calendar on their blog or personal web site, or for business and other organizations that want to publish a web based calendar.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Computer
• Internet Access
• FREE Google account

1. FREE Account

   Start the Google calendars web site (http://calendar.google.com) and sign on. If you have not yet created your own Google account, sign up now for a free account that may be used for Google Mail (Gmail), Google Calendar, and other Google applications.

2. Multiple Calendars

   If you have yet to create your calendar(s), create a new calendar now. Note that you may have multiple calendars, if needed (and each may be color-coded to make visual distinction easy). Since embedding your calendar in a web page means you'll be sharing it with the world, you may want to create a new calendar to contain only the events you want exposed (rather than use your personal calendar).

3. Calendar Settings

   Before you can embed a calendar into a web page, you must first make the calendar public. Click Settings (top right of window), then choose Calendars.

4. Enable Sharing

   Next to the name of the calendar you want to make public, click the option to enable or edit Sharing.

5. Make Public

   Check the box to "Make this calendar public". Note that your calendar details may now be embedded in a web page. By making the calendar public, the data for events is also visible to search engines.

6. Add Friend's Calendar

   In addition to creating your own calendars, you may add a calendar that is owned by another user (if they have opted to make the calendar public). Simply click the Add link below your list of calendars, then select "Add a Friend's Calendar". Enter the e-mail address to add the shared calendar.

7. Add Public Calendar

   Another source of calendars are published public calendars. You may add these calendars by clicking Add below your list of calendars, then select "Add a Public Calendar".

8. 

   Select the desired Calendar from the list. To return to your own calendar, click "<< Back to Calendar" at the top left of the window.

9. Calendar Settings

   Once you have created or added the calendar(s) you want to publish, click Settings (top right of window). Then click Calendars.

10. 

    Next, click the name of the calendar you want to publish. If you want to publish multiple calendars at once, just click any one of the names for now. You'll be able to select all calendars you want embedded in Step 12.

11. Calendar Details Dialog

    At the Calendar Details dialog, next to the section entitled "Embed This Calendar", click "Customize the Size, Color, and other Options".

12. Customize Embedded Calendar

    On the Google Embeddable Calendar Helper screen, you may customize how you want the calendar to be displayed. Also, you may check or select the calendar(s) you want to include. Note that you may select multiple calendars, if desired.

13. Copy HTML code...

    Once you've selected all the options as desired, click "Update HTML" (usually isn't necessary since the HTML is updated automatically when you make changes on this window), then copy the text in the HTML window.

14. Paste the text copied in Step 13 to your web page, where desired. Your Calendar will now be displayed on your web page, reflecting the latest calendar data from your Google calendar(s).

Tips & Warnings

• You may also display a read-only version of your calendar from other applications in either XML or iCal format by copying the links from the "Calendar Addresses" section of the Calendar Details dialog (referenced in Step 11). Be sure to use the links posted next to "Calendar Addresses"; do not share the links posted next to "Private Addresses".

• Want to share a link to your Calendar as a simple URL? That's easy, as well. From the "Calendar Addresses" section of the Calendar Details dialog (referenced in Step 11), simply click the "HTML" button next to "Calendar Addresses". Again, do not share link posted next to "Private Addresses".

• For a PHP based project you can use on your web sites, check out the open source Web Calendar application at http://www.k5n.us/webcalendar.php.

Resources

• Google Calendars
• Web Calendar - PHP Open Source Application