Add-to-calendar links

Add-to-calendar links are a sim­ple, HTML-only way to en­hance event web­sites.

When you’re build­ing a web­site for a timed event like a talk or a work­shop, you want to make it re­ally easy for peo­ple to add your event to their own cal­en­dar. I sus­pect once you get some­one to do that, there’s a pretty high chance they’ll ac­tu­ally come to your event - which is why you’re build­ing the site in the first place.

One way to do this is an add-to-cal­en­dar but­ton. When peo­ple click it, it opens the Add an Event” screen of their cal­en­dar app with all the event in­for­ma­tion al­ready filled in, so all they need to do is hit save”. It does­n’t re­place show­ing the event in­for­ma­tion vi­su­ally on your web­site, but it’s a nice en­hance­ment.

Here’s the in­ter­ac­tion I’m talk­ing about:

Add Event screen in Google Calendar

Different cal­en­dar apps have dif­fer­ent ways of do­ing this (some use spe­cial links with URL pa­ra­me­ters, oth­ers need an ICS file) and sup­port dif­fer­ent sets of event data, so you’ll have to com­pro­mise and prob­a­bly show a few but­tons at once. Still, the cost of do­ing this is low be­cause it all hap­pens in HTML — no Javascript or other de­pen­den­cies re­quired.

Google cal­en­dar

Google has no of­fi­cial doc­u­men­ta­tion on this (although they used to), but add-to-cal­en­dar links work and sup­port a sur­pris­ing num­ber of fea­tures.

The base URL is calendar.google.com/calendar/render?action=TEMPLATE fol­lowed by a bunch of query pa­ra­me­ters con­tain­ing your event data.

Parameters

Office 365 + Outlook Live

No doc­u­men­ta­tion from Microsoft ei­ther, but a com­pany called the Interactive Design Foundation put to­gether this doc­u­ment with a bunch of in­for­ma­tion.

Office 365 and Outlook live use the same query pa­ra­me­ters, but dif­fer­ent base URLs:

Parameters

Microsoft Teams

This one ac­tu­ally has of­fi­cial doc­u­men­ta­tion, but I can’t for the life of me get it to work. I get the sense from the doc­u­men­ta­tion that maybe it’s only de­signed to work from within a text chat on Teams? But it might be a con­fig­u­ra­tion is­sue on my end, too.

ICS

Most other cal­en­dar apps (like the Mac OS cal­en­dar and the Windows cal­en­dar app) sup­port events in a file for­mat called ICS. They look like this:

BEGIN: VCALENDAR
VERSION: 2.0
BEGIN: VEVENT
DTSTAMP: 20220714T170000Z
DTSTART: 20220714T170000Z
DTEND: 20220714T190000Z
DESCRIPTION: Description
SUMMARY: Title
LOCATION: Location
END: VEVENT
END: VCALENDAR

The lines be­tween BEGIN: VEVENT and END: VEVENT con­tain your event data. ICS has a lot of fea­tures, but the most use­ful ones for our sce­nario are:

You could make an ICS file and point a link at it, but they’re small enough you can write them into a data URL:

<a href="data:text/calendar;charset=utf-8,BEGIN:VCALENDAR%0D%0AVERSION:2.0%0D%0ABEGIN:VEVENT%0D%0ADTSTAMP:20220714T170000Z%0D%0ADTSTART:20220714T170000Z%0D%0ADTEND:20220714T190000Z%0D%0ADESCRIPTION:The event description%0D%0ASUMMARY:The event title%0D%0ALOCATION:Location%0D%0ASTATUS:CONFIRMED%0D%0ASEQUENCE:0%0D%0AEND:VEVENT%0D%0AEND:VCALENDAR">Download ICS</a>

Demo

View on Codepen

Notes