154

I am unclear about the exact format to have a link on a website that will add a single event to a users Google calendar. I see that eventbrite has done it here but I would love some clear specs or links in the right direction

http://www.eventbrite.com/event/1289487893

http://screencast.com/t/6vvh1khS

Donald Duck
  • 8,409
  • 22
  • 75
  • 99
Quotient
  • 3,925
  • 6
  • 31
  • 35
  • 1
    See also this question and answers: https://stackoverflow.com/q/22757908 – Denilson Sá Maia Jul 07 '16 at 01:29
  • 1
    Reference how to convert date to required format in this comment below: http://stackoverflow.com/questions/10488831/link-to-add-to-google-calendar#comment43819710_21653600 (took me a while to notice the comment) – Elijah Lofgren Aug 30 '16 at 23:31
  • 1
    See https://github.com/InteractionDesignFoundation/add-event-to-calendar-docs/blob/master/services/google.md – Alies Jan 13 '19 at 20:34
  • For reference, the gentleman who wrote [this article](https://www.labnol.org/add-to-calendar-link-generator-200623) on `23/02/21` and [this app](https://www.labnol.org/add-to-calendar-link-generator-200623) seems to be [very knowledgeable](https://www.labnol.org/about), so perhaps the syntax he suggests is worth considering amongst all the other options posted [here](https://stackoverflow.com/q/10488831), [here](https://stackoverflow.com/q/44549128) and [here](https://stackoverflow.com/q/5831877). – user1063287 Jul 19 '21 at 05:07

4 Answers4

291

Here's an example link you can use to see the format:

https://www.google.com/calendar/render?action=TEMPLATE&text=Your+Event+Name&dates=20140127T224000Z/20140320T221500Z&details=For+details,+link+here:+http://www.example.com&location=Waldorf+Astoria,+301+Park+Ave+,+New+York,+NY+10022&sf=true&output=xml

Note the key query parameters:

text
dates
details
location

Here's another example (taken from http://wordpress.org/support/topic/direct-link-to-add-specific-google-calendar-event):

<a href="http://www.google.com/calendar/render?
action=TEMPLATE
&text=[event-title]
&dates=[start-custom format='Ymd\\THi00\\Z']/[end-custom format='Ymd\\THi00\\Z']
&details=[description]
&location=[location]
&trp=false
&sprop=
&sprop=name:"
target="_blank" rel="nofollow">Add to my calendar</a>

Here's a form which will help you construct such a link if you want (mentioned in earlier answers):

https://support.google.com/calendar/answer/3033039 Edit: This link no longer gives you a form you can use

Community
  • 1
  • 1
User
  • 62,498
  • 72
  • 186
  • 247
  • 1
    Another resource on this: http://taskboy.com/blog/Creating_events_for_Yahoo_and_Google_calendars.html – User Feb 10 '14 at 07:09
  • 36
    Note you can also specify a time zone parameter e.g.: `ctz=America/New_York` – User Feb 28 '14 at 15:27
  • I tried using time zone for Europe CET but that doesn't seem to work. It jumps straight to my regular calendar when running the link. – sir_brickalot Dec 10 '14 at 17:39
  • @sir_brickalot: Try a link format like so: https://www.google.com/calendar/render?action=TEMPLATE&text=Your+Event+Name&dates=20140127T224000Z/20140320T221500Z&details=For+details,+link+here%3a+http://www.example.com&location=Waldorf+Astoria,+301+Park+Ave+,+New+York,+NY+10022&ctz=CET – User Dec 11 '14 at 04:06
  • 1
    That seems to work partially: The time shows correctly but the input still has to be UTC so I have to calculate. Or do I miss something there? – sir_brickalot Dec 15 '14 at 17:09
  • 32
    To convert to the datetime format: `(new Date()).toISOString().replace(/-|:|\.\d\d\d/g,"");` – Trantor Liu Dec 30 '14 at 10:36
  • 8
    The link above is good for desktop. For mobile similar url is https://calendar.google.com/calendar/gp#~calendar:view=e&bm=1 and parameters are the same. – Supreet Sethi Feb 26 '16 at 08:39
  • 8
    You can find a complete list of CTZ values at [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) – Marco Lackovic May 26 '16 at 13:03
  • 3
    Doesn't work on Android when the Google Calendar app opens. It just says event not found. Is there a way to handle this? – Resist Design Sep 17 '16 at 06:37
  • Is there a list of parameters anywhere? What about all-day events? – Meekohi Jul 25 '17 at 18:46
  • can we link it directly to the site without redirecting to `action=TEMPLATE` ? – Varshini Sep 08 '17 at 13:51
  • 2
    @Meekohi: For all-day events don't specify the time in the dates parameter e.g. `&dates=20140127/20140127` – User Sep 25 '17 at 09:24
  • 1
    I'm trying to use this format, but I can't see why this is not working, dates=20140127T224000Z/20140320T221500Z this parameter opens the site with this wrong hours 27 ene 2014 4:40pm to 4:15pm 20 mar 2014 – Iván E. Sánchez Nov 21 '17 at 06:52
  • 9
    @IvánSánchez late reply but, the 'Z' at the end of the 'dates' param will set the equivalent time in UTC - so will likely be wrong for your time zone. Drop the 'Z' at the end of each date and you'll find the time showing up in the right zone. `dates=20140127T224000/20140320T221500` – Jarvis Johnson Mar 15 '18 at 15:16
  • Can anyone tell what is the time format is this `20140127T224000`? at the time of parsing using `new Date(20140127T224000)` throwing error of invalid date – Pardeep Jain May 14 '18 at 13:22
  • 1
    To get the proper datetime format using `strftime`: `DateTime.now.strftime('%Y%m%dT%H%M%S')` – vansan Jul 31 '18 at 15:42
  • FWIW I found the event creating form still working in the WayBack machine https://web.archive.org/web/20120102120045/http://www.google.com:80/googlecalendar/event_publisher_guide.html#individual – cogdog Nov 15 '18 at 15:11
  • How can invite a specific e-mail creating Google Calendar Event via URL action=TEMPLATE ? – Acca Emme Jan 27 '21 at 08:59
  • Try this tool https://decomaan.github.io/google-calendar-link-generator/ – nandur May 05 '22 at 16:27
33

There is a comprehensive doc for google calendar and other calendar services: https://github.com/InteractionDesignFoundation/add-event-to-calendar-docs/blob/master/services/google.md

An example of working link: https://calendar.google.com/calendar/render?action=TEMPLATE&text=Bithday&dates=20201231T193000Z/20201231T223000Z&details=With%20clowns%20and%20stuff&location=North%20Pole

Alies
  • 639
  • 6
  • 11
17

I've also been successful with this URL structure:

Base URL:

https://calendar.google.com/calendar/r/eventedit?

And let's say this is my event details:

Title: Event Title
Description: Example of some description. See more at https://stackoverflow.com/questions/10488831/link-to-add-to-google-calendar
Location: 123 Some Place
Date: February 22, 2020
Start Time: 10:00am
End Time: 11:30am
Timezone: America/New York (GMT -5)

I'd convert my details into these parameters (URL encoded):

text=Event%20Title
details=Example%20of%20some%20description.%20See%20more%20at%20https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10488831%2Flink-to-add-to-google-calendar
location=123%20Some%20Place%2C%20City
dates=20200222T100000/20200222T113000
ctz=America%2FNew_York

Example link:

https://calendar.google.com/calendar/r/eventedit?text=Event%20Title&details=Example%20of%20some%20description.%20See%20more%20at%20https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10488831%2Flink-to-add-to-google-calendar&location=123%20Some%20Place%2C%20City&dates=20200222T100000/20200222T113000&ctz=America%2FNew_York

Please note that since I've specified a timezone with the "ctz" parameter, I used the local times for the start and end dates. Alternatively, you can use UTC dates and exclude the timezone parameter, like this:

dates=20200222T150000Z/20200222T163000Z

Example link:

https://calendar.google.com/calendar/r/eventedit?text=Event%20Title&details=Example%20of%20some%20description.%20See%20more%20at%20https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10488831%2Flink-to-add-to-google-calendar&location=123%20Some%20Place%2C%20City&dates=20200222T150000Z/20200222T163000Z

AuRise
  • 2,253
  • 19
  • 33
8

For the next person Googling this topic, I've written a small NPM package to make it simple to generate Google Calendar URLs. It includes TypeScript type definitions, for those who need that. Hope it helps!

https://www.npmjs.com/package/google-calendar-url

Mikael Lirbank
  • 4,355
  • 2
  • 28
  • 25