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?

Antiphon

Is the calendar public? The owner of the calendar will probably need to give it public read permissions. – Noyade

Permissions are public and I still get that 401 Error. I would think its possible since on the google calendar page you actually click a hyperlink to drill into and edit event details. – Antiphon

Hi Joe, are you trying to display the actual calendar or just the feed? If it's the feed, then that may explain why it returns 401. – Noyade

"The web address (URL) you are trying to visit is invalid. This is likely because part of the URL is missing. Please check that you are using the complete URL. (Invalid "eid" parameter)" I always get eid=$csei_goog_1362565475, even on different events on different calendars. Edit: Never mind. I hadn't saved the event. Stupid mistake. – Sick

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.)

Udder

Can you post where you found this info? Is it newly documented? – Isbella

I just found it by clicking on more details» in an event from a publicly shared calendar. Either it's a new feature or I feel dumb because I've been looking for a way to do this for a long time :D – Udder

Answer 2

Here is the HTML to build the link:

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

Puryear

Answer 3

Event URL is not calendar URL.

This link brings explanations: Google Calender v3

And the way to build this url is:

GET https://www.googleapis.com/calendar/v3/calendars/calendarId/events/eventId

where calendarId & eventId are parametres.

Hope this is helpfull.

Missie

I obtained my (public calendar's) calendarID from the calendar settings and the eventID through a script I wrote in a Google spreadsheet that dumps out all the events for a given calendar. My attempts to access the URL built as above from a browser failed with a "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup." error. I'm not sure Google allows accessing Events via a browser (click) as the OP asks. – Isbella

@Isbella I finally figured it out. You just need the event id: https://www.google.com/calendar/event?eid={event-id}. See my answer for more details. – Udder

I am not so sure that this is an answer to the question asked. – Koontz

Answer 4

I wanted to post this because it is tangental to the question being asked and this post comes up when I was trying to do the following.

I was trying to generate a Google Event for the sole purpose of being added to other people's calendars, not saved to any particular calendar. I've found an example here and I'm currently trying to figure out the URL params it accepts.

https://www.google.com/calendar/render?action=TEMPLATE&text=PRP+Due&dates=20141106T120000Z/20141106T120000Z&details&location&trp=false

Theona

Answer 5

To view Google calender event by event Id.

You can use below example:

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

Example For Indian TimeZone :

https://calendar.google.com/calendar/event?eid=ZjVicWczYWpndmh0ZmdtYmd0cXFxZWc3czggdTJoZmoybGg0aDcwbmhzMzV2c25pamd1dG9AZw&ctz=Asia/Kolkata

Diminution

Answer 6

To create a page where users can view the Calendar of Events publicly, a user who has permissions to change calendar sharing settings must first make the calendar public:

• From the Google Calendar, at the top right, click the Settings wheel.

• In Settings, click the "Calendars" tab.

• Click the name of the Calendar you're working with.

• Next, click the "Share this Calendar" tab. Make sure the checkboxes are checked from the screenshot below (circled in red).

---

• Afterwards, click the "Calendar Details" tab, located at the top left.

• Scroll down to the "Calendar address" section, as shown in the screenshot below.

• Click "HTML".

• A popup modal will appear, which includes the public URL you'll need to access the Calendar publicly.

---

---

Here is an example of what the URL might look like:

https://www.google.com/calendar/[email protected]&ctz=America/Los_Angeles&gsessionid=OK

In addition, see the Google Calendar Data API for information on creating and working with Calendar Gadgets.

Noyade

This answer doesn't seem to be for the OP's question. You state how to make a link to a Calendar, whereas the OP wants a link to an EVENT. – Isbella

Answer 7

To get the event from the Google Calendar API v3, call:

GET https://www.googleapis.com/calendar/v3/calendars/calendarId/events/eventId

The event contains a property htmlLink, which is exactly what you need:

An absolute link to this event in the Google Calendar Web UI. Read-only.

See https://developers.google.com/google-apps/calendar/v3/reference/events.

The link looks like this:

https://www.google.com/calendar/event?eid=XzYwcTMwYzFnNjBvMzBlMWk2MG80YWMxZzYwcmo4Z3BsODhyajJjMWg4NHMzNGg5ZzYwczMwYzFnNjBvMzBjMWc2c28zMmRoaDhwMGpnaDIxNnQyNDZkaGc2NG8zMGMxZzYwbzMwYzFnNjBvMzBjMWc2MG8zMmMxZzYwbzMwYzFnNzByNDRoMWk2b3AzOGUxazZoMms2aDFrNmQwamNkaTI2OHBrMmhpMjg4czRjZ2hoNzBwMF8yMDA2MDUwNSBob3BtYW4ubmxfbjE5ZGF2YWgxb3Zkb3EzbGl2N2t1aWU5Z.

It will open the event full screen, only of course if you have access to the event. The screen will contain a back button to go back to the calendar.

Clearly, you can't construct this link yourself so you will need to do a call to the API, but you are probably already doing that anyway.

Logarithm

this doesn't answer the OP's request for a "link so that someone can click and view the calendar event". You can use https://www.google.com/calendar/event?eid={event-id}, see my answer for more details. – Udder

Any idea how to get this link to be a specific timezone? – Viceroy

Answer 8

When an google calendar event created, then in the response we got result property. In this result property, one more htmlLink would be available which have link regarding the event being created. Now, it can opened :

window.open(response.result.htmlLink, '_target');

Baelbeer

Answer 9

Wordpress + ACF google cal.

Set your ACF date picker to custom return Y-m-d g:i a

Then create a google formatted date.

$event_start_date = get_field('event_start_date');
$event_print_date = date('d/m/Y',strtotime($event_start_date));
$event_start_time = get_field('event_start_time');
$event_end_date = get_field('event_end_date');
$event_print_enddate = date('d/m/Y',strtotime($event_end_date));
$event_end_time = get_field('event_end_time');

$calendarDate = date('Ymd',strtotime($event_start_date)) .'T'. date('Hi',strtotime($event_start_time)). '00/' . date('Ymd',strtotime($event_end_date)) .'T'. date('Hi',strtotime($event_end_time)) . '00';

Link

<a href="https://www.google.com/calendar/render?action=TEMPLATE&text=<?php the_title(); ?>&dates=<?php echo $calendarDate; ?>&details=<?= strip_tags($event_contact_info); ?>  For+details,+link+here:+<?php the_permalink(); ?>&location=<?php echo $calendarLocation; ?>&sf=true&output=xml" target="_blank" rel="nofollow">Add this event to my Google Calendar</a>

Castara

Answer 10

private string GetEventLink(string calendarId, string eventId)
{
    var calendarIdToEncode = calendarId.Substring(0, calendarId.IndexOf("@", StringComparison.Ordinal) + 2);
    var eId = Convert.ToBase64String(Encoding.UTF8.GetBytes(eventId + " " + calendarIdToEncode));
    return $"https://www.google.com/calendar/event?eid={eId.Substring(0, eId.Length - 2)}";
}

Norton

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Quiz

Answer 11

The link works but if there are two logged in accounts it only goes to the first one and shows a "Couldn't find the event" message. Does anyone know if there is a way to configure the link to open in the correct account?

I found that if I copy the link to an event in GoogleCalendar's UI it has this shape:

https://www.google.com/calendar/event?action=TEMPLATE&tmeid=MTM4Y2lhaqcW04bGRvazBpcWhyOTQ3aG0gc2FudGlhZ29wdWVudGVwQG0&tmsrc=example%40example.com

that seems to attempt to link to the correct account but it goes to the main one too.

Bawbee

Answer 12

Google Have created a page to DIY.

https://support.google.com/calendar/answer/3033039

Zola

This does not answer the OP's question, but says how to make a button that will create a new event (reminder) in a Google calendar for a Google user. – Isbella