Monday, July 28, 2008

Google Calendar Event Images

Many college are jumping on Google Apps to begin hosting student email. One of the features of Google Apps is the public calendar where you can post college events.

There are some limitations with Google Calendar:


  1. When you create an event you cannot add custom fields. There's no field for a brief description (teaser) or image.
  2. When I asked Google how to add additional fields they recommended using the API and writing a custom application that uses the google calendar database as a backend. Unfortunately I don't have the time or the resources to do that right now.

I wanted to be able to embed google calendar items in a webpage with a one line teaser and picture.

Example:

Screenshot


How did I do it?

To get around this I added the subject and the image to the description but google likes to strip out the html tags. I created a new event on my calendar and in the description box I typed:




This is my description of the event. It can be as long as I need. This is where I would type all the details that would show up after someone clicks the link.
<br>
Image: http://www.myurl.com/image.jpg
<br>
Subject: This is my teaser

I parsed the xml file created by google and extracted the image and subject from the description. I wrapped the image and subject in the proper html tags when I displayed the content on my webpage.

Here is what the Google Calendar XML file looks like: http://www.google.com/calendar/feeds/jazzerup%40gmail.com/public/basic

I found a free ASP script to display RSS/XML feeds - ByteScout (Big thanks to ByteScout for sharing your code with the world)


zip Download my modified version



I used regular expressions to extract the subject and image. Please note I'm awful at Regular Expressions but I found this great site where people share their completed expresssions: http://regexlib.com/

To install this code you'll need to change the URLToRSS = http://www.google.com/calendar/feeds/jazzerup%40gmail.com/public/basic
to your Google Calendar XML Address.


How do I find my Google Calendar XML Address?

It's a little tricky to find your XML Address

Step 1: Open your Google Calendar: http://www.google.com/calendar

Step 2: Click on "Settings" in the upper right hand corner.

Step 1


Step 3: Under the "Calendars" tab select your calendar.

Step 2

Step 4: Under "Sharing" click on "Sharing:Edit Settings"

step 3

Step 5: Under the "Share the Calendar" tab you need to make the Calendar Public in order for your feeds to show events.

Step 3

Step 6: Under the "Calendar Details" tab there are links to your XML, ICAL and HTML calendars.

step 4


step 5

Step 7: Click on the XML link and copy the address.

step 6

4 comments:

  1. Thank you!!! This is exactly what I've been looking for. I learned a lot from your tutorial!!

    ReplyDelete
  2. Having a bit of trouble. I'm not familiar with .asp. When I post the googlecalendar.asp and try and view it I get a page of code. Only line of code I changed is URLToRSS = "" with my calendar feed. What did I miss?

    ReplyDelete
  3. Hi! I want to add this feature to gcalendar for joomla, because I want to display an image in the events, can you guide me how to do it? I don't know where I can change the URL to XML

    ReplyDelete