Add to Calendar Button – JavaScript Calendar Links

Add-to-Calendar Button is a JavaScript web component for creating event buttons that open Google Calendar, Apple Calendar, Outlook, Microsoft 365, Microsoft Teams, Yahoo Calendar, or an iCal file.

It works as a custom <add-to-calendar-button> element in HTML and also exposes a JavaScript API for custom triggers.

Features

• Calendar links for Apple, Google, iCal, Microsoft 365, Microsoft Teams, Outlook.com, and Yahoo.
• Timed, all-day, recurring, and multi-date events.
• Calendar subscription links through an external ICS calendar.
• Built-in button styles, dark mode, custom CSS variables, external CSS, and ::part styling hooks.
• Localized labels with RTL language handling.
• Generated Schema.org event data and configurable ICS metadata.
• Custom trigger support through atcb_action().
• Tracking data through the element attribute and browser data layer.

How to use it

1. Install Add-to-Calendar Button

Load the latest JavaScript from a CDN.

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

Or install & import it via NPM

npm install add-to-calendar-button

import 'add-to-calendar-button';

Import necessary styles and languages.

import 'add-to-calendar-button';
import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';

2. Create a basic Add to Calendar button

<add-to-calendar-button
  name="Launch Party"
  start-date="2026-10-15"
  start-time="18:00"
  end-time="20:00"
  time-zone="America/Los_Angeles"
  location="123 Demo Street"
  options="'apple','google','ical','ms365','msteams','outlookcom','yahoo'"
></add-to-calendar-button>

3. Create an all-day event

Omit start-time and end-time for an all-day event.

<add-to-calendar-button
  name="Conference Day"
  start-date="2026-10-20"
  end-date="2026-10-20"
  options="'apple','google','ical','outlookcom'"
></add-to-calendar-button>

4. Create a recurring event

<add-to-calendar-button
  name="Weekly Standup"
  start-date="2026-10-05"
  start-time="09:00"
  end-time="09:30"
  time-zone="America/New_York"
  options="'apple','google','ical'"
  recurrence="weekly"
  recurrence-by-day="MO"
  recurrence-count="12"
></add-to-calendar-button>

5. Open the menu on click

<add-to-calendar-button
  name="Product Demo"
  start-date="2026-10-12"
  options="'google','outlookcom'"
  trigger="click"
></add-to-calendar-button>

6. Use your own trigger button

Use atcb_action() when your project needs a custom button or a programmatic trigger. JavaScript configuration objects use camelCase.

import { atcb_action } from 'add-to-calendar-button';
const config = {
  name: 'Launch Party',
  startDate: '2026-10-15',
  startTime: '18:00',
  endTime: '20:00',
  timeZone: 'America/Los_Angeles',
  options: ['google', 'ical']
};
const button = document.querySelector('#calendar-button');
button.addEventListener('click', () => atcb_action(config, button));

Full configuration options

Boolean HTML options can be written as bare attributes, such as inline or subscribe. The JavaScript configuration form uses camelCase equivalents.

Event parameters

ICS file parameters

These attributes affect generated Apple/iCal files.

Layout and style parameters

Additional parameters

PRO-only parameters

JavaScript API

Public TypeScript types

Server-side and worker entries

v3 includes dedicated exports for server-side rendering and DOM-free date utilities.

import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';
import {
  atcb_decorate_data_dates,
  atcb_generate_timestring
} from 'add-to-calendar-button/utils';

Tracking events

Each component exposes its last interaction through atcb-last-event and pushes interaction records to the browser data layer.

• initialization.
• openList.
• closeList.
• openCalendarLink.
• openSingletonLink.
• openSubEventLink.
• success.

Styling with CSS ::part

The component uses Shadow DOM. Use style-light/style-dark, a custom stylesheet, or these public ::part names for direct CSS styling:

• atcb-button-wrapper.
• atcb-button.
• atcb-button-icon.
• atcb-button-text.
• atcb-list-wrapper.
• atcb-list.
• atcb-list-item.
• atcb-list-item-close.
• atcb-list-icon.
• atcb-list-text.
• atcb-modal-box.

add-to-calendar-button#event-button::part(atcb-button) {
  background: #222;
  color: #fff;
}

Important v2 to v3 migration notes

• Change the browser CDN URL from @2 to @3.
• Use official kebab-case HTML attributes such as start-date and button-style. JavaScript configuration objects use camelCase.
• Use lowercase calendar option values: apple, google, ical, ms365, msteams, outlookcom, and yahoo.
• Use lowercase event status values: tentative, confirmed, and cancelled.
• Rename v2 created/updated to HTML ics-created/ics-updated or JavaScript icsCreated/icsUpdated. The old timestamp names are not read in v3.
• npm projects need explicit imports for non-default styles and non-English locales.
• Update renamed custom-labels keys when your integration overrides date.status.cancelled.cta, label.share.email.subject, label.rsvp, form.status, or form.success.
• Review configured URLs. v3 rejects script-capable schemes such as javascript: and accepts only the documented URL schemes for calendar files, CSS, images, and event links.
• Legacy no-pro, unstyle, and no-pro-unstyle entries are compatibility shims. New code should use the main package entry.
• Full v3 behavior uses the Baseline 2023 browser floor, including Safari 16.4 and current evergreen browsers.

Alternatives and related resources

• calendar-link generates calendar URLs and ICS output from JavaScript event objects when a prebuilt button component is not required.
• Calendar.js is a full event calendar UI for displaying and managing events inside the page.

Changelog

v3.3.0 (10/01/2026)

• Optimized rendering flows (incl. SSR hydration)

v3.2.0 (09/29/2026)

• New option to import all styles and languages when using the npm package.

v3.1.2 (09/25/2026)

• respect all kinds of custom labels for ssr

v3.1.1 (09/18/2026)

• Fixing issues with the modal background

v3.1.0 (09/16/2026)

• Fixed accessibility issues

v3.0.3 (09/14/2026)

• Added iPadOS ics support

v3.0.2 (09/10/2026)

• Bugfix

v3.0.1

• Current v3 release used by the project documentation.
• v3 standardizes the HTML API on kebab-case attributes and lowercase calendar/status values.
• Dedicated SSR and DOM-free utility entries are available.
• Non-default npm styles and locales use explicit imports.
• New ICS-specific configuration is available for reminders, URLs, categories, classification, priority, geo data, attachments, excluded recurrence dates, and timestamps.

v2.15.0

• Final v2 series used by the previous CSSScript article.