| Use Google Calendars to Display Events on Your Website |
|
| Thursday, 04 October 2007 | |
|
I guess the season of sharing is approaching. I got some questions from readers with websites on how to display or share calendar information. For example, you want to display an interactive calendar of your group’s events for readers or provide a way they can add the event to their calendar. There are many methods, but one easy and free solution is to create a Google Calendar and embed the code on your website.
Google Calendars have many public uses. Some examples I’ve seen include:
Regardless of the intent, Google Calendar makes the process easy although some settings are buried. One advantage to embedding the info on your site is that users can see the events without having to have a Google account. The setup process consists of four main steps. Adding a Google CalendarAs you might expect, creating a calendar requires you to have a free Google account. Google allows you to create many calendars that can be public or private. By default, Google creates a calendar with your name. However, we wish to add one that everyone can see. 1. Log into your Gmail account 2. From the top navigation bar, click Calendar. Your default calendar will show which is usually your name. 3. On the left side under the My Calendars section, click Manage calendars. 4. The Calendar Setting panel will show. You should be on Calendars tab. 5. Click the Create new calendar button under the My Calendars section. Manage Calendar Access and PermissionsThis is the step where you make your calendar public. You can also assign other people to add, edit or remove events. Public means that others can see your events if they use Search Public Calendars. 1. On the Create New Calendar panel, enter in a calendar name. This should define your group or calendar’s purpose. 2. Enter a description so people who search Google calendars can learn more about the contents. The info in this field is searchable. 3. Enter in your location. Again, this helps if you want people to search for your events. 4. Enter your time zone information. 5. In the Share with everyone section: choose Share all information on this calendar with everyone. 6. Click Yes to the confirmation message about sharing. 7. In the Share with specific people, you can optionally add people to manage the calendar. 8. Click the Create Calendar button at the bottom. Google will add your calendar under your My Calendars section. The calendar should show a checkbox next to it. You can see a screenshot of a test calendar I’m creating. I’ve included the town name and zip code since I’m not certain how people will search. I’ve also enabled the calendar to share with everyone. At this point, our calendar is created, but no one would find it yet since we haven’t added a public event. Adding Calendar EventsGoogle allows four ways to enter data. Each offers advantages. 1. Click the desired time slot on the calendar and add event name. 2. Click the Create Event link toward the top left. This allows you to enter all your information including location. 3. Click Quick Add on the left. You can add a short sentence that includes event and date. 4. Import a CSV or iCal file using the Add button above your My Calendars list. For my test calendar, I used the Create Event link since I could add all my options at once. Tip: Once you add a calendar event, you might want to do a test search to make sure people can see your calendar. Embedding the Google Calendar CodeOnce you’ve created your calendar, you need to grab the code to embed on your site. 1. In the My Calendars section, click the Manage calendars link at the bottom 2. Click the link for your calendar. 3. On the Calendar Details tab, scroll down to the Calendar Address section. 4. Click the blue HTML button. A pop up message will appear. 5. In this message box, click the link for configuration tool. A new Google page opens with your calendar and customizable settings. 6. Change any setting from the left side that suits your users. For example, you may wish to make the calendar smaller to fit your web page. (The snapshot didn’t show background color, but it is an option.) 7. Click the Update HTML button on the top right. 8. Click in the code box and highlight all the text. 9. Right-click and select copy from your browser menu. 10. Go to the web page where you want this calendar to display. 11. Right-click and paste your HTML code. Note: Some HTML WYSIWYG editors don’t allow you to paste HTML code. For example, I use Joomla and I need to disable my editor and paste the code. You should be able to see my embedded calendar below. You can click the dates and tabs. You can even add this calendar to your Google Calendar or add specific events by clicking them. As you play around with Google Calendars and add them to your web site, you’ll probably see other opportunities. My example was a simple one, but the service allows for more than just embedding the calendar on your site. |
|
| Last Updated ( Sunday, 02 December 2007 ) |
