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

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.

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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.

Answer 9

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

Answer 10

Google Have created a page to DIY.

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

Answer 11

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.

Answer 12

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