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
5 Answers
Here's an example link you can use to see the format:
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
-
35Note you can also specify a time zone parameter e.g.:
ctz=America/New_York
– UserFeb 28, 2014 at 15:27 -
31To convert to the datetime format:
(new Date()).toISOString().replace(/-|:|\.\d\d\d/g,"");
Dec 30, 2014 at 10:36 -
8The link above is good for desktop. For mobile similar url is calendar.google.com/calendar/gp#~calendar:view=e&bm=1 and parameters are the same. Feb 26, 2016 at 8:39
-
8You can find a complete list of CTZ values at List of tz database time zones May 26, 2016 at 13:03
-
8@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
Mar 15, 2018 at 15:16
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
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:
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:
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!
Or use this link. It would generate the link from the input fields
-
Instead of simply providing the answer directly, try writing a detailed comment that explains the solution, as long as the explanation is not too lengthy. @Pratik Kabade .– DSDmarkDec 21, 2022 at 15:28
-
1Oh yeah you're right, afterall stackoverflow is for that only. Appreciate it! Dec 22, 2022 at 16:25
23/02/21
and this app seems to be very knowledgeable, so perhaps the syntax he suggests is worth considering amongst all the other options posted here, here and here.