Add To Calendar Button

The convenient JavaScript snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.
Alternatives To Add To Calendar Button
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Dates12,1251,7495863 months ago164January 29, 2020610mitJavaScript
An easily internationalizable, mobile-friendly datepicker library for the web
React Big Calendar6,855732188a day ago148June 05, 2023275mitJavaScript
gcal/outlook like calendar component
React Day Picker5,3171,4938132 days ago216June 19, 202318mitTypeScript
DayPicker is a customizable date picker component for React, with native TypeScript support.
React Infinite Calendar3,564119304 years ago42May 09, 201777mitJavaScript
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Devextreme Reactive2,0151301042 months ago104July 03, 202379otherTypeScript
Business React components for Bootstrap and Material-UI
Fullcalendar React1,664601173 days ago50May 25, 20235mitJavaScript
The official React Component for FullCalendar
Mobiscroll1,511132 years ago25May 17, 202131otherJavaScript
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Add To Calendar Button1,21783 days ago103August 30, 2023otherJavaScript
The convenient JavaScript snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.
React Modern Calendar Datepicker9351722 days ago22July 03, 2020161mitJavaScript
A modern, beautiful, customizable date picker for React
Moment Jalaali877208285a month ago38April 09, 202240mitJavaScript
A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.
Alternatives To Add To Calendar Button
Select To Compare

Alternative Project Comparisons

Add to Calendar Button

Code Quality npm Installations Total npm Installations per Month jsDelivr npm Hits npm bundle size

Your next Add to Calendar Button

The convenient JavaScript Web Component, which lets you reliably create beautiful buttons, where people can add events to their calendars.

#1 Product of the Day on ProductHunt

For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars. It's main goal is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script. Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.

Supported Calendars: Apple (via iCal), Google, Microsoft (365, Outlook, Teams), Yahoo, generic iCal

The script, since it is a web component, integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.

Supported Technology: Angular, React, Vue, Svelte, and every other project that can load JavaScript

Works with all modern browsers (Chrome, Edge, Firefox, Safari) on Windows, Mac, Android, and iOS as well as rather restricted webview environments like the Instagram in-app browser.


See for a live demo and playground.


Simple and convenient integration of 1 or many buttons, configurable directly within the HTML code.

Supported Calendars

  • Google Calendar.
  • Apple Calendar.
  • Yahoo Calender.
  • Microsoft 365, Outlook, and Teams.
  • Automatically generated iCal/ics files (for all other calendars and cases).

Event Types

  • Timed and all-day events.
  • One-time, multi-date, recurring.
  • Calendar subscription.
  • Most robust time zone and daylight saving management (via our own TimeZones iCal Library).
  • Dynamic dates (like "today + 3").


  • Beautiful and adjustable UI.
  • Light and dark mode.
  • Multiple themes.


  • Optimized and adjustable UX (for desktop and mobile).
  • Dynamic dropdown positioning.
  • Taking care of all those edge cases, where some scenarios do not support specific setups (like WebView blocking downloads); utilizing beautiful user guidance workarounds.
  • Auto-generated rich (structured) data for better SEO.
  • Full support for mouse, touch, or keyboard input (W3C WAI compliant).
  • Supporting 20+ languages, incl. RTL text for Arabic & Persian; but also custom labels and text blocks (i18n).

And much more

  • Well documented code, to easily understand the processes and build on top of it.
  • No external service or backend dependencies.
  • Fully GDPR, CCPA, and LGPD compliant by design - without the need of signing some data processing agreement.
  • FREE and easy.

Installation / Setup

Option 1: simple (CDN)

You can use the jsDelivr CDN and load the respective script directly into your website.

Place the script tag inside the <head> section.

<script src="" async defer></script>

Option 2: npm

Import the package using the following npm command:

npm install add-to-calendar-button

Import the module into your project/component

import 'add-to-calendar-button';

Based on your framework/library, you might need to make minor adjustments to the respective config.

Find detailed installation guides for the most common ones, like React, Angular, Vue, Svelte, or Astro at


A button can be easily created by using the respective custom element.


You can then configure the button by simply adding the options as attributes to it. Boolean values (true/false) can be set as optionName="true" or simply by adding optionName to the tag. Not setting it at all would be automatically translate to "false".

Minimal structure (required)

Mind that for auto-generating rich snippets, a location would be mandatory as well.

A time zone is not required, but recommended.

  name="Add the title of your event"

A more powerful example

  name="Add the title of your event"
  description="A nice description does not hurt"
  location="Somewhere over the rainbow"

More Examples Full Configuration Documentation

Support it!

You like this project? It would be awesome if you would support it, so it lives on!


npm Version Build Status

Find all changes in the dedicated file at


Anyone is welcome to contribute, but mind the guidelines:

IMPORTANT NOTE: Run npm install and npm run format to auto-lint!

Copyright and License

Copyright (c) Jens Kuerschner.

Licensed under Elastic License 2.0 (ELv2).

About open-source: We consider ourselves open-source. However, we are also aware of the controversy coming with licenses like the one selected. Therefore, and contrary to many other companies and products, we no longer use the term in any marketing statements unless it is about other pieces which really are under an official OSI license.

Speaking about the license: We love it, because it is so simple. Have a look! You are basically free to do anything unless you are not offering the tool itself as a product or service; or want to remove copyright and license stuff. In doubt, simply ask and we find a way. :)

Kudos go to as well as all contributors:

Popular Calendar Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vanilla Javascript