How to build html link to a google calendar event?

Question

Using the google calendar API v3, I added an event to a google calendar. Now I want to built an html link so that someone can click and view the calendar event.

Here's what I have tried:

<a href="https://www.google.com/calendar/feeds/default/private/full/{{ event.googleID }}">View Google</a>

the href looks like:
https://www.google.com/calendar/feeds/default/private/full/bigstringhere1ovmuup7mjf0

Problem is I get a a 401 Error "Authorization Required"

How can I build a link to view/edit the calendar event based on a google calendar ID?

Answer 1

There is a way! To view a public calendar event, use a link of the form:

https://www.google.com/calendar/event?eid={event-id}&ctz={timezone}

where {event-id} is the unique event id, and {timezone} is one of these time zones.

Here's an example: link to a specific public calendar event.

If you have editing rights to the calendar this event is from, you will be able to edit the event and see the guest list. Otherwise, you just see the public information about the event.

Since it can be difficult to determine the event id, here's a bookmarklet that produces a link to your Google Calendar event when you are editing its Details page:

javascript:(function(){ try { window.prompt('Shareable link to this event:','https://www.google.com/calendar/event?eid='+document.getElementsByClassName('ep')[0].getAttribute('data-eid')) } catch (e) {alert("Use this bookmarklet to get a shareable link to a Google Calendar event when editing its Details page.")}})()

And a version of this bookmarklet which works with the new (as of 2017) Google Calendar UI:

javascript:(function(){ 
  window.prompt('Shareable link to this event:',
    'https://www.google.com/calendar/event?eid='+
    window.location.href.split("/").pop().split("?")[0])
})()

(Also possibly useful, how to link to a specific day of a public Google calendar:

https://www.google.com/calendar/embed?src={calendar-id}&mode=day&dates={yyyymmdd}%2F{yyyymmdd}

where {calendar-id} is the calendar's id and {yyyymmdd} is the day you want to link to.

Optional parameters include the time zone and whether to display various items, for example:

&ctz=Asia/Taipei&showNav=0&showPrint=0&showCalendars=0

Example: link to single day of a public calendar.)