Link para adicionar ao calendário do Google

115

Não estou certo sobre o formato exato para ter um link em um site que adicionará um único evento ao calendário do Google de um usuário. Vejo que a eventbrite fez isso aqui, mas eu adoraria algumas especificações claras ou links na direção certa

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

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

google-calendar-api Quociente
fonte
1
Veja também esta pergunta e respostas: stackoverflow.com/q/22757908
Denilson Sá Maia
1
Consulte como converter a data para o formato necessário neste comentário abaixo: stackoverflow.com/questions/10488831/… (demorei um pouco para perceber o comentário)
Elijah Lofgren
1
Consulte github.com/InteractionDesignFoundation/…
lptn

Respostas:

231

Aqui está um link de exemplo que você pode usar para ver o formato:

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

Observe os principais parâmetros de consulta:

text
dates
details
location

Aqui está outro exemplo (retirado de 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>

Este é um formulário que o ajudará a construir esse link, se desejar (mencionado nas respostas anteriores):

https://support.google.com/calendar/answer/3033039 Editar: Este link não fornece mais um formulário que você pode usar

Do utilizador
fonte
29
Observe que você também pode especificar um parâmetro de fuso horário, por exemplo:ctz=America/New_York
Usuário
23
Para converter para o formato de data e hora:(new Date()).toISOString().replace(/-|:|\.\d\d\d/g,"");
Trantor Liu
7
O link acima é bom para desktop. Para celular, o URL semelhante é calendar.google.com/calendar/gp#~calendar:view=e&bm=1 e os parâmetros são os mesmos.
Supreet Sethi
7
Você pode encontrar uma lista completa dos valores de CTZ em Lista de fusos horários do banco de dados tz
Marco Lackovic
6
@ IvánSánchez atrasou a resposta, mas, o 'Z' no final do parâmetro 'datas' definirá a hora equivalente em UTC - então provavelmente estará errado para seu fuso horário. Solte o 'Z' no final de cada data e você verá que a hora está aparecendo na zona certa. dates=20140127T224000/20140320T221500
Jarvis Johnson
5

Também tive sucesso com esta estrutura de URL:

URL base:

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

E digamos que estes são os detalhes do meu evento:

Title: Event Title
Description: Example of some description. See more at /programming/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)

Eu converteria meus detalhes nestes parâmetros (codificados por URL):

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

Link de exemplo:

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% 20Algumas% 20Place% 2C% 20City & datas = 20200222T100000 / 20200222T113000 & ctz = America% 2FNew_York

Observe que, como especifiquei um fuso horário com o parâmetro "ctz", usei os horários locais para as datas de início e término. Como alternativa, você pode usar datas UTC e excluir o parâmetro de fuso horário, como este:

dates=20200222T150000Z/20200222T163000Z

Link de exemplo:

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% 20Algumas% 20Place% 2C% 20City & datas = 20200222T150000Z / 20200222T163000Z

Tessa
fonte
2

Para a próxima pessoa que pesquisar este tópico no Google, escrevi um pequeno pacote NPM para simplificar a geração de URLs do Google Agenda. Inclui definições de tipo TypeScript, para aqueles que precisam disso. Espero que ajude!

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

Mikael Lirbank
fonte