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 that you are familiar with HTML. We also have a simple form to help you create HTML snippets for these buttons if you do not 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. These special characters can still be displayed in your events, but you will need to convert them into special codes for your CGI parameters. (We have not 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 behaviour) within the URL to which your button links. Your event CGI parameters should be separated by ampersand symbols (&).
Here is the general format for these HTML snippets. Your event parameters are placed 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_en-GB.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 letters must be capitalised). |
action=TEMPLATE |
| text (required) |
Event title. |
text=Brunch at Java Cafe |
| dates (required) |
Date and time of the event, in UTC format. Append a capitalised 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, 15th April 2006
dates=20060415T180000Z/20060415T190000Z
for 15th April 2006 11:00am - noon Pacific Time |
| sprop (required) |
Information to identify your organisation, 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>Delicious! |
| location |
Where the event will take place. Recommended locations are those that work as Google Maps queries. |
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>Delicious!
dates=20060415T180000Z/20060415T190000Z
trp=true
sprop=website:http://www.javacafebrunches.com
sprop=name:Jave Cafe
Putting it all together, here is the whole snippet of HTML that 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>Delicious!&trp=true&sprop=:http://www.javacafebrunches.com&sprop=name:Jave Cafe"><img src="http://www.google.com/calendar/images/ext/gc_button2_en-GB.gif"></a>
Button Styles
We have created a variety of buttons from which you can choose. Feel free to choose the ones that look and fit best on your site.
|
