Add Events To Apple/Google/Yahoo/MicroSoft Calendars – atcb.js

Preview:

Description:

Add-to-Calendar Button is a JavaScript library that lets you add custom events to popular calendars (like Google Calendar, Apple Calendar, Yahoo Calendar, Outlook, Microsoft Teams, and Microsoft 365) and automatically generates iCal/ics files for other calendar services like Apple.

Easy to implement in Vanilla JavaScript, Vue, React, Angular, Svelte, and Astro.

How to use it:

1. Install and import the atcb.js.

# NPM
$ npm i add-to-calendar-button
import 'add-to-calendar-button';

// OR From A CDN
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

2. Insert your event data (JSON) into the add-to-calendar-button component.

<add-to-calendar-button
  name="Event Title"
  startDate="2022-02-24"
  endDate="2022-02-28"
  options="[
    'Apple',
    'Google',
    'iCal',
    'Microsoft365',
    'MicrosoftTeams',
    'Outlook.com',
    'Yahoo'
  ]"
  icsFile="demo-event.ics"
>
</add-to-calendar-button>

3. Trigger the Add-to-Calendar menu on click instead.

<add-to-calendar-button
  name="Event Title"
  options="['Google']"
  trigger="click"
>
</add-to-calendar-button>

4. Add more detailed information to your event.

<add-to-calendar-button
  name="Event Title"
  options="['Google']"
  startTime="10:24"
  endTime="18:56"
  location="Your Location"
  description="[p][strong]Check out[/strong]
  status="CONFIRMED" // TENTATIVE, CONFIRMED, CANCELLED
  sequence="0"
  uid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  organizer="NAME|EMAIL"
  availability="free" // busy, free
  subscribe="false"
>
</add-to-calendar-button>

5. The library also works with timezone:

<add-to-calendar-button
  name="Event Title"
  options="['Google']"
  timeZone="America/Los_Angeles" // default: UTC
>
</add-to-calendar-button>

6. Customize the iCal/ics file name.

<add-to-calendar-button
  name="Event Title"
  options="['Google']"
  icsFile="/path/to/icsfile/"
  iCalFileName="File Name"
  created="YYYYMMDDTHHMMSSZ"
  updated="YYYYMMDDTHHMMSSZ"
>
</add-to-calendar-button>

7. Recurring events are supported as well.

<add-to-calendar-button
  name="Event Title"
  options="['Google']"
  recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=10"
>
</add-to-calendar-button>

8. All possible event options.

<add-to-calendar-button
  options="[]" // Apple, Google, iCal, Microsoft365, MicrosoftTeams, Outlook.com, Yahoo
  name=""
  description=""
  startDate=""
  startTime=""
  endDate=""
  endTime=""
  timeZone="UTC"
  location=""
  status="CONFIRMED" // TENTATIVE, CONFIRMED, CANCELLED
  sequence="0"
  uid=""
  organizer="" // NAME|EMAIL
  dates=""
  recurrence="" // "RRULE:..."; daily, weekly, monthly, yearly
  recurrence_interval="1"
  recurrence_until=""
  recurrence_count=""
  recurrence_byDay=""
  recurrence_byMonthDay="" 
  recurrence_byMonth="" // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  recurrence_weekstart="MO" // MO, TU, WE, TH, FR, SA, SU
  availability="" // busy, free
  subscribe="false"
  icsFile="" // URL
  iCalFileName=""
  created="" // YYYYMMDDTHHMMSSZ
  updated="" // YYYYMMDDTHHMMSSZ
>
</add-to-calendar-button>

9. All possible style options.

<add-to-calendar-button
  buttonStyle="default" // default, 3d, flat, round, neumorphism, text, date, custom, none
  inline="false"
  customCss="" // URL
  buttonsList="false"
  label="Add to Calendar"
  trigger="hover" // hover, click
  listStyle="dropdown" // dropdown, dropdown-static, overlay, modal
  hideBackground="false"
  hideIconButton="false"
  hideIconList="false"
  hideIconModal="false"
  hideTextLabelButton="false"
  hideTextLabelList="false"
  hideCheckmark="false"
  size="6|6|6"
  lightMode="light" // system, dark, light, bodyScheme
  language="en" // en, de, nl, fr, es, pt, tr, zh, ar, hi, pl, id, no, fi, sv, cs, ja, it, ko, vi
  customLabels="{}"
>
</add-to-calendar-button>

10. All possible image options.

<add-to-calendar-button
  images="[]" // array of URLs
  hideRichData="false"
  identifier=""
  bypassWebViewCheck="false"
  hideBranding="false"
  debug="false"
>
</add-to-calendar-button>

Changelog:

v2.4.3 (09/18/2023)

• bugfixes

v2.4.2 (09/17/2023)

• bugfixes

v2.4.1 (08/31/2023)

• bugfixes

v2.4.0 (08/30/2023)

• forceOverlay feature
• bug fixes
• optimization for date button and iOS

v2.3.4 (08/16/2023)

• fixing atcb_action with CDN and cspnonce sanitization

v2.3.3 (08/16/2023)

• fixing leaking global vars
• nonce option
• minor optimization

v2.3.2 (08/11/2023)

• Fixing stacking issues
• optimizing some flows

v2.3.1 (08/02/2023)

• Better accessibility

v2.3.0 (07/26/2023)

• Added pastDateHandling
• Addeddisabled option
• Added new static-dropup option
• Added Persian + Estonian
• better date button style and logic (incl. custom label on date style button)
• better iOS support
• calendar name as label with buttonsList option
• way more optimization and bug fixes

v2.2.10 (07/10/2023)

• Upgraded dependencies.
• Removed location workaround, where on iOS, for Google Calendar location got added to the description additonally.
• Optimized clipboard handling, subscription management, as well as opening new tabs process.
• Fixing a bug, where 1 option button collides with the blockInteraction functionality.

v2.2.9 (05/17/2023)

• Bugfixes

v2.2.8 (05/13/2023)

• fixing Microsoft link

v2.2.7 (05/10/2023)

• enabling outlook mobile again

v2.2.6 (05/06/2023)

• no longer sending time zone to Google for all-day events, since Google tried to optimize times then in some cases.
• updated MS Teams link generation for better all-day support (still some workaround due to lack of support).

v2.2.5 (04/06/2023)

• Updates
• Dependency bumps
• Enabling text-hover color
• minor bug fixes

v2.2.4 (03/16/2023)

• better iCal text support
• package bump
• fixing mobile MS services bug

v2.2.3 (03/08/2023)

• Optimizing order and logic of loading data to better support Angular data binding.

v2.2.2 (03/02/2023)

• bug fixes
• better debugging and error logging
• update flat style

v2.2.1 (03/01/2023)

• Better debugging

v2.2.0 (02/28/2023)

• “attendee” option
• lazy external css loading
• bugfixes

v2.1.4 (02/25/2023)

• fixing edge case when no time zone is given

v2.1.3 (02/24/2023)

• Fixing wrong day on date style button with all-day events.

v2.1.2 (02/14/2023)

• Optimizing code for backwards compatibility.

v2.1.1 (02/02/2023)

• Bugfix

v2.1.0 (02/01/2023)

• Adding Romanian language support
• Adding back commonJS support
• Minor fixes

v2.0.0/1/2 (01/28/2023)

• full code refactoring

v1.18.8 (11/28/2022)

• Fixing wrong date output at date buttons.

v1.18.7 (11/18/2022)

• Fixing/Optimizing handling of subscribe urls

v1.18.6 (11/07/2022)

• Fixing css drop-shadow (if multiple) iOS bug

v1.18.5 (10/27/2022)

• Optimizing time calculation and fixing an issue where allday events right at a day where Daylight saving kicks in would lead to wrong numbers

v1.18.4 (10/26/2022)

• bug fixes
• New option to hide icons and text labels

v1.18.3 (10/23/2022)

• bug fixes

v1.18.2 (10/22/2022)

• bug fixes

v1.18.1 (10/19/2022)

• bug fixes
• option to hide new success checkmarks
• new atcb_destroy functionality

v1.18.0 (10/03/2022)

• multi-date functionality
• subscription support
• busy/free option
• style updates
• code refactoring
• timezone database update

v1.17.0 (10/03/2022)

• Fixing critical and not so critical bugs
• Updating the license from MIT with “Commons Clause” to Apache-2.0

v1.16.0 (10/01/2022)

• CSP fix
• custom sequence, UID, and status support
• bundle size optimization

v1.15.5 (09/17/2022)

• Fixing an issue where a missing description would make the schema.org invalid.

v1.15.4 (09/17/2022)

• Fixing multiple edge case issues
• Fixing broken custom option labels
• New optional flat style
• Forcing Apple instead of iCal option on iOS

v1.15.3 (09/14/2022)

• Google calendar GMT time zone fix
• dependency updates
• better build process

v1.15.2 (09/13/2022)

• Bundle size optimization
• Style updates

v1.15.1 (09/08/2022)

• Catching misspelled JSON input errors
• Fixing small rich data issue with recurring events

v1.15.0 (09/07/2022)

• more stable time zone management via our own TimeZones iCal Library
• more languages
• easier recurrence
• better schema.org support (incl. images)
• organizer information

v1.14.6 (08/26/2022)

• Minor fixes optimizing iCal distribution and tests.

v1.14.5 (08/24/2022)

• Dependency updates
• Supporting more languages (incl. arabic RTL)

v1.14.4 (08/17/2022)

• Bugfixes
• Style optimizations

v1.14.3 (08/10/2022)

• Fixing a bug, where checking for mobile usage with react implementation failed

v1.14.2 (08/10/2022)

• Fixing a bug, where the dropdown gets misplaced in some edge cases

v1.14.0/1 (08/09/2022)

• better keyboard navigation
• dynamic dropdown, automatically adjusting to the screen
• new option to adjust size
• Microsoft mobile bug (temporary) workaround
• fixes and code refactoring

v1.13.2 (07/29/2022)

• Bugfix

v1.13.0 (07/28/2022)

• Introducing smart adaptive dark mode
• Bug fixes
• Some code refactoring (preparing future functionalities)

v1.12.0 (07/27/2022)

• style updates
• better input sanitization
• webView edge case support
• text block overwrite option

v1.11.4 (07/21/2022)

• support HTML in ics files

v1.11.3 (07/21/2022)

• endDate no longer required
• multiple bug fixes

v1.11.2 (07/19/2022)

• css bug fixes

v1.11.1 (07/18/2022)

• Bugfixes
• small optimizations

v1.11.0 (07/16/2022)

• A billion bug fixes for better cross browser, OS, and device support.
• Solution for Instagram in-app browser not downloading ics files.
• Option to make the background transparent.
• Option to set language for system text.
• Recurring optimization (still missing full iCal timezone support).
• Text option for URLs.
• Catch for 1-option buttons, where we hide the dropdown.
• Optimization of keyboard input.
• General performance optimization.
• New linting rules.
• Better element id handling for more stable tracking support.
• Option to explicitly provide an ics file for more stable support.
• Re-rendering of dropdown on screen resize instead of closing it.
• [Breaking] Reset the style to the initial plain on. 3D option still available as backup.

v1.10.1 (07/06/2022)

• Minor bugfix

v1.10.0 (07/05/2022)

• [Breaking!] Dropped the schema.org input
• Instead, now auto-generating schema.org for every button
• Optimized Readme and especially React examples

v1.9.1 (07/01/2022)

• Bug fixes (e.g. hyperlinks being cut off) and security patches (incl. linter)

v1.9.0 (06/29/2022)

• A lot of bug fixes and improvements.

v1.8.10 (06/15/2022)

• Added a script to easily bump the version number and build the project all in one.

v1.8.9 (06/10/2022)

• Buttons now have type=”button”

v1.8.8 (06/09/2022)

• CSS fixes for better performance and iOS support.

v1.8.7 (06/08/2022)

• Security patch for grunt dependency

v1.8.6 (05/06/2022)

• Minor CSS animation fix

v1.8.5 (05/05/2022)

• Fixes problems with full-day events over different timezones.

v1.8.4 (04/30/2022)

• Security patch for grunt

v1.8.3 (04/23/2022)

• Minor style fixes
• Closing lists on screen resize

v1.8.2 (04/19/2022)

• Bugfixes

v1.8.1 (04/18/2022)

• Fixing 3D issues with Safari

v1.8.0 (04/18/2022)

• New button style on hover as well as smaller changes to the code structure as well as some fixes.

v1.7.7 (04/15/2022)

• Optimizing it for touch. No longer closing an open list when only scrolling.

v1.7.5 (04/10/2022)

• Stripping HTML tags (except) to clean up any mess external tools (e.g. Apple’s Safari or Browser extensions) might do to the JSON.

v1.7.4 (04/09/2022)

• Extending the date+time support from schema.org setups to all implementations.
• Auto-cleaning date and time strings from seconds and milliseconds.

v1.7.3 (04/09/2022)

• Adding css files to export statement.
• test step to support server side rendering
• Minor fixes

v1.7.2 (03/17/2022)

• Fixing some styling issues
• Optimizing code structure

v1.7.1 (03/17/2022)

• Fixes and changes to new v1.7 export magic.

v1.7.0 (03/17/2022)

• Rework of general code structure
• New way to use the logic with custom elements/buttons
• tons of optimization

v1.6.4 (03/14/2022)

• Fixing bugs, which broke events that missed description or location

v1.6.3 (03/08/2022)

• bug fixes, import optimization

v1.6.2 (03/04/2022)

• Removing real in-code line breaks before parsing the innerHTML JSON to prevent parsing errors. You can still add line breaks to the description in the documented way (using or \n explicitely)