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?

Is the calendar public? The owner of the calendar will probably need to give it public read permissions. — jamesmortensen, May 26 '12 at 05:10
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. — codingJoe, May 27 '12 at 04:21
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. — jamesmortensen, May 27 '12 at 06:28
"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. — Bill, Dec 15 '16 at 21:03

score 44 · Answer 1 · edited Sep 19 '18 at 17:08

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

Can you post where you found this info? Is it newly documented? — Fuhrmanator, Aug 08 '14 at 11:54
I just found it by clicking on [more details»](https://www.google.com/calendar/event?eid=ZHRvZGppcHJhYWthbGJhZ2JzNGkxZnVsa2MgOTZtcHU4OHYyZDNvbnFrcDZwaDk4NjVwMWNAZw&ctz=Asia/Taipei) in an event from a [publicly shared calendar](https://www.google.com/calendar/embed?src=96mpu88v2d3onqkp6ph9865p1c%40group.calendar.google.com&mode=day&dates=20140802%2F20140802&ctz=Asia/Taipei). 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 — Kai Carver, Aug 08 '14 at 14:17

score 16 · Answer 2 · edited Mar 12 '16 at 21:57

16

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

edited Mar 12 '16 at 21:57

Tunaki

132,869
46
340
423

answered Mar 12 '16 at 21:49

Flea

11,176
6
72
83

score 7 · Answer 3 · edited Nov 23 '12 at 08:45

7

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.

edited Nov 23 '12 at 08:45

René Höhle

26,716
22
73
82

answered Nov 23 '12 at 08:24

Eric Van Loo

87
1
2

1

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. – Fuhrmanator Jan 16 '14 at 21:17
@Fuhrmanator 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. – Kai Carver Aug 08 '14 at 06:44
I am not so sure that this is an answer to the question asked. – Zsolt Szatmari Aug 09 '17 at 07:13

score 3 · Answer 4 · answered May 31 '15 at 11:57

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

score 3 · Answer 5 · edited Dec 28 '16 at 12:54

3

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

edited Dec 28 '16 at 12:54

FelixSFD

6,052
10
43
117

answered Dec 28 '16 at 09:29

Maveňツ

1
12
50
89

score 0 · Answer 6 · answered May 27 '12 at 08:10

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

Google Calendar Settings Page

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.

Get URL For Public Google Calendar

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

https://www.google.com/calendar/embed?src=domain.comrandomstring@group.calendar.google.com&ctz=America/Los_Angeles&gsessionid=OK

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

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. — Fuhrmanator, Jan 16 '14 at 21:03

score 0 · Answer 7 · edited Aug 28 '15 at 07:49

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.

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. — Kai Carver, Aug 08 '14 at 06:48

score 0 · Answer 8 · answered May 11 '19 at 07:24

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');

score 0 · Answer 9 · answered May 21 '20 at 04:40

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>

score 0 · Answer 10 · answered Jul 25 '22 at 10:10

0

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)}";
}

answered Jul 25 '22 at 10:10

Elijah Zabrodskyi

1
1

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](/help/how-to-answer). – Community Jul 27 '22 at 20:45

score -2 · Answer 11 · answered Dec 10 '13 at 10:13

-2

Google Have created a page to DIY.

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

answered Dec 10 '13 at 10:13

MANnDAaR

2,546
7
45
64

3

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. – Fuhrmanator Jan 16 '14 at 21:02

How to build html link to a google calendar event?

11 Answers11

Linked