Max Kohler

Nonfiction Graphic Design

Add-to-calendar links

Add-to-calendar links are a simple, HTML-only way to enhance event websites.

When you're building a website for a timed event like a talk or a workshop, you want to make it really easy for people to add your event to their own calendar. I suspect once you get someone to do that, there's a pretty high chance they'll actually come to your event - which is why you're building the site in the first place.

One way to do this is an add-to-calendar button. When people click it, it opens the "Add an Event" screen of their calendar app with all the event information already filled in, so all they need to do is hit "save". It doesn't replace showing the event information visually on your website, but it's a nice enhancement.

Here's the interaction I'm talking about:

Add Event screen in Google Calendar

Different calendar apps have different ways of doing this (some use special links with URL parameters, others need an ICS file) and support different sets of event data, so you'll have to compromise and probably show a few buttons at once. Still, the cost of doing this is low because it all happens in HTML – no Javascript or other dependencies required.

Google calendar

Google has no official documentation on this (although they used to), but add-to-calendar links work and support a surprising number of features.

The base URL is calendar.google.com/calendar/render?action=TEMPLATE followed by a bunch of query parameters containing your event data.

Parameters

Office 365 + Outlook Live

No documentation from Microsoft either, but a company called the Interactive Design Foundation put together this document with a bunch of information.

Office 365 and Outlook live use the same query parameters, but different base URLs:

Parameters

Microsoft Teams

This one actually has official documentation, but I can't for the life of me get it to work. I get the sense from the documentation that maybe it's only designed to work from within a text chat on Teams? But it might be a configuration issue on my end, too.

ICS

Most other calendar apps (like the Mac OS calendar and the Windows calendar app) support events in a file format 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 between BEGIN: VEVENT and END: VEVENT contain your event data. ICS has a lot of features, but the most useful ones for our scenario 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