How to install the Add to Calendar Button

Step 1: Integrate via CDN

Load the respective script by adding the following script tag to the head section of your website.
The script will be loaded in a non-blocking way. So you don't need to worry about where to include it exactly.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3" async defer></script>

Step 2: Use it

Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.

Yes, it is that simple.

Your code block could look like the following.

<add-to-calendar-button
  name="Title"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-09-12"
  end-date="2026-09-12"
  start-time="10:15"
  end-time="23:30"
  time-zone="EST"
></add-to-calendar-button>

Styles & languages

The script ships with the "default" button style and the English language pack built in - so the button looks great and works out of the box without any extra configuration.

Every other style and language loads automatically on demand (a few KB each) the moment you reference it - no manual wiring needed.

Loading via CDN (Vanilla JS)

With the CDN script tag, on-demand styles and languages are fetched from the same origin as the script itself - nothing else to set up. If you self-host the script, point the "style-source" attribute at the directory that contains the styles/ and locales/ folders.

See the "button-style" and "language" options at the Configuration page for the full picture.