How to Create and Embed a Google Calendar

While meeting with a non-profit group this week, they mentioned how difficult it was to update their calendar of events and expressed frustration that the calendar was often out of date. I suggested creating a specific Google calendar for all of their organization's events, then embedding the code into the website. My client was already using this web-based calendar tool with her Gmail account, so it would be an easy task to keep this calendar current on her desktop. The best part? All changes will automatically update as long as you are connected to the internet, or the next time you are online.

Here are the steps you need to follow:

• Log into Gmail and click on the “Calendar” link on the top left.
• Look for the section called “My Calendars” on the left sidebar. Click on “Create”.
• Fill in the information requested. Keep in mind that whatever you name the calendar can be shown on the web page (but it doesn’t have to be).
• Click “Create Calendar” at the bottom of the page.
• You should now have a new calendar showing up under “My Calendars”. Here’s how you add items to it...
• Click on a day and add an item title, time frame and other information. Between the “Where” and “Description” information there should be a tab where you can select the name of the calendar in which you want that item to appear. Select your new calendar, then hit save.
• To embed a calendar, click on “Settings” under the “My Calendars” section.
• Click on the name of the calendar that you want to display.
• Scroll down the page until you see “Embed this Calendar” and click on the “Customize the color, size, and other options” link.
• From here, you can select the monthly/weekly/daily calendar view and whether or not the title shows up, etc. Play around until you figure out what settings you like. One thing to keep in mind is that you probably want the table size to be no wider than about 500 pixels (the default is 800 pixels), but check your existing layout for specifications.
• After you make all your changes, click on the “Update HTML” button at the top of the page.
• Copy and paste the code into your web page where you want the calendar to appear. Keep in mind that if you are using Wordpress or a WYSIWYG editor (like Dreamweaver), you need to be in the html view (not the visual view) or the calendar will just show up as a bunch of code.
• You did it! Every time you update this calendar it will automatically update in your web page. Nice!