Instructions for making Google Calendar event reminder buttons
The "recipe" for creating the HTML snippets that control Google Calendar event reminder buttons is described below. These instructions assume you have some familiarity with HTML. We also have a simple form to help you create HTML snippets for these buttons if you don't want to get familiar with the instructions below.
A note on disallowed characters
Certain characters, like the equals sign (=), cause problems when used within CGI parameter values. You can still have these special characters show up in your events, but you'll need to convert these characters into special codes for your CGI parameters. (We haven't converted the disallowed characters in the examples below for the sake of readability.) Learn
more
Detailed instructions
Your event details (like Event Title, Event Start Time, Event End Time and Event Location) each
get their own CGI parameter (a fancy phrase for the segment of a web address that alters a link's
behavior) within the URL that your button links to. Your event CGI parameters should be separated
by ampersand symbols (&).
Here's the general format for these HTML snippets. Your event parameters go at the end of the
href link, in any order, and you can add as many parameters as you need.
<a href="http://www.google.com/calendar/event?action=TEMPLATE&Parameter1&Parameter2&Parameter3"><img
src="http://www.google.com/calendar/images/ext/gc_button2.gif"></a>
The following table lists the basic CGI parameters that define an event:
| Parameter Name |
Value |
Example |
| action (required) |
This value is always TEMPLATE (all capitalized). |
action=TEMPLATE |
| text (required) |
Event title. |
text=Brunch at Java Cafe |
| dates (required) |
Date and time of the event, in UTC format. Append a capitalized letter "Z" to the end of
times. Google Calendar will interpret the date and time for the user's time zone. |
dates=20060415/20060415
for all day, April 15th 2006
dates=20060415T180000Z/20060415T190000Z
for April 15th 2006 11:00am - noon Pacific Time |
| sprop (required) |
Information to identify your organization, like your website address. Multiple sprop parameters
are allowed. This information should be specified as type:value. The colon character should
only be used to separate type and value. |
sprop=website:www.javacafebrunches.com
for website = www.javacafebrunches.com
sprop=website:www.javacafebrunches.com&sprop=name:Java Cafe
for website = www.javacafebrunches.com and name = Java Cafe |
| add |
Email address of the guest to invite. Multiple add parameters
are allowed. |
add=username1@domain.com
for one guest
add=username1@domain.com&add=username2@domain.com
for two guests |
| details |
Description of the event. Simple HTML is allowed. |
details=Try our Saturday brunch special:<br><br>French
toast with fresh fruit<br><br>Yum! |
| location |
Where the event will take place. Locations that work as Google Maps queries are recommended. |
location=Java Cafe, San Francisco, CA |
| trp |
Specifies whether the user's Google Calendar shows as "busy" during this event. The default
value is false. |
trp=true |
Example HTML for a Google Calendar event reminder button
Here is what the CGI parameters would look like for brunch reservations:
action=TEMPLATE
text=Brunch at Java Cafe
location=Java Cafe, San Francisco, CA
details=Try our Saturday brunch special:<br><br>French toast with fresh fruit<br><br>Yum!
dates=20060415T180000Z/20060415T190000Z
trp=true
sprop=website:http://www.javacafebrunches.com
sprop=name:Jave Cafe
Putting it all together, here's the whole snippet of HTML you would add to your website to insert
the Google Calendar event reminder button for this brunch reservation:
<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=Brunch
at Java Cafe&dates=20060415T180000Z/20060415T190000Z&location=Java Cafe, San Francisco, CA&details=Try
our Saturday brunch special:<br><br>French toast with fresh fruit<br><br>Yum!&trp=true&sprop=
website:http://www.javacafebrunches.com&sprop=name:Jave Cafe"><img src="http://www.google.com/calendar/images/ext/gc_button2.gif"></a>
Button Styles
We've created a variety of buttons for you to choose from. Feel free to pick the ones that look
and fit best on your site.
|
