Images in Calendar Events

I recently tried to figure out how to get an image to be a part of a calendar event. In the course of doing some research, I discovered that developers can use the Calendar API to create events gadgets with custom icons and images attached to them. However, this would probably require writing some code, and I didn't have the time or energy to devote to doing it properly. I was looking more for a quick and easy solution.

Image: OpenClipArt.org

Have you ever had one of those moments where you realize the solution has been staring you in the face all along, and you've just been too thick to see it? That happened to me today.

Calendar descriptions support HTML. That means that you can put things like links into the description of the event, and when viewed on a public calendar, the link will work. Your own calendar will show the code itself, but the public version will execute the instructions provided by the code.

To do this, you'll need to know a couple of things:

1. How to upload and host an image on the web somewhere.
2. The URL for the image you want to include.
3. How to create an image tag in HTML.

1. How to upload and host an image on the web somewhere:

You can use a service like DropBox to host your file and generate the link pretty easily, but anyone who knows me will know that I'm going to do it through Google. You can host images through Google drive, or you can create your own graphics. Create a Google drawing of what you want, then click file - publish to the web. Copy the URL it gives you.

2. Get the URL for the image

For my purposes, I was using an image that I had already put on a website, so it was a simple matter of right-clicking the image and choosing "copy image location" in Chrome browser. Your method may vary, depending on how you've uploaded the image. Basically, you're looking for the web address of the image that starts with http://... Of you're using a Google drawing, you've already got the URL you need.

3. Create the image tag

HTML uses a pretty easy syntax for tagging an image. You will need to add the following code, substituting the image URL for your own.

<img src="http://goo.gl/0gxVpN">

That's all you have to do. When you look at your calendar event in your Google Calendar, it will show the code. If you navigate to the public calendar, when you look at the description of the event, the image will appear.

SMBSD #gafesummit Backchannel

Check out the backchannel for the SMBSD gafesummit here. And sign up for Twitter!

#gafesummit Tweets