Free, framework-agnostic Web Component

Make your events get saved

A framework-agnostic Web Component that lets visitors save events to Google, Apple, Outlook, Yahoo, and iCal with zero friction.

Install for free Try live demo

Add to Calendar Button showing options for major calendar services

9Mnpm installations

486kmonthly npm downloads

69Mmonthly CDN hits

1.5kGitHub stars

Targeted Workflow

How are you building this?

Whether you want clean code in your frontend stack or a complete no-code event page, we've got you covered.

Developer installationv3.4.1 · Elastic License 2.0

I write code

Drop a single Web Component into any web application or static site.

# Install via npm
npm install add-to-calendar-button

<!-- CDN Script Tag in <head> -->
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button" async defer></script>

Configuration Docs

What are you building with?

Angular Astro Next.js Nuxt React Svelte Vue Wix WordPress JavaScript

Add to Calendar PRONo-Code Engine

I manage events

Need visual button management, RSVP forms, hosted .ics files, or event landing pages without writing code?

Visual Management: Configure buttons and event microsites visually.
RSVP & Managed ICS: Host dynamic .ics files and collect guest confirmations.
Automated Workflows: Post-save CTAs, API, webhooks, Zapier & Pipedream.

Create without code

Interactive Configurator

Live Button Playground

Customize event parameters and layout settings in real time, then copy the live generated Web Component snippet.

Loading playground…

This playground covers a subset of available attributes. For complete schema details, see the Configuration Docs

Core Engine Capabilities

Built for edge cases & real-world events

Calendar APIs and .ics specifications require careful platform handling. We solved every browser, protocol, and timezone anomaly so you don't have to.

1. All Major Calendars

Direct deep-links for web calendars (Google, Outlook, Office 365, Yahoo) alongside validated RFC 5545 .ics files for Apple and native desktop clients.

View Calendar Examples

2. Flexible Event Types

Supports all-day events, multi-date schedules, recurring RRULE intervals, subscriptions, and dynamic date parameters updated via JavaScript.

See Configuration Docs

3. Time Zones & DST

Detects the visitor's local browser timezone automatically and converts UTC offsets seamlessly, including Daylight Saving Time transitions.

Timezone Details

4. Browser & Webview Handling

Rigorously tested across iOS Safari popup blockers, Android Chrome, in-app mobile webviews (Instagram, LinkedIn), and Outlook webmail protocols.

Try it in the playground

5. Styling & 49+ Languages

Custom themes, CSS custom variables, custom button labels, and automatic i18n localization in 49+ languages based on browser locale.

Language List

6. Accessibility & Privacy

WCAG AA compliant with keyboard and screen-reader support. 100% client-side execution, strict GDPR environments, and CSP nonce support.

Security Docs

Clear Choice

A button is enough - until it isn't.

Choose the free Web Component for custom codebases, or upgrade to PRO when you need visual management, RSVP tracking, and landing pages.

Free Web Component and Add to Calendar PRO feature comparison
Capabilities	Free Web Component	Add to Calendar PRO
Deployment & SetupHow you integrate into your workflow	Embed via npm / CDN / HTML	Hosted Page & Embed Code
ConfigurationButton and event setup model	Configure in code	Visual Management UI
Calendar Save Links & FilesGoogle, Apple, Outlook, Yahoo, iCal	Generate calendar save options	Generate options + Managed .ics hosting
Event Landing PagesDedicated event microsites	Manual integration in your site	Event Landing Pages
RSVP & Attendee TrackingConfirmation forms and guest lists	-	RSVP Forms
Post-Save CTAs & IntegrationsFollow-up actions and automation	-	Post-save CTA, API, Webhooks, Zapier & Pipedream
Licensing / AccessLicensing model	Free (Elastic License 2.0)	Free & paid plans available