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

Category: Date & Time , Javascript , Recommended | June 18, 2024
Author:jekuer
Views Total:54 views
Official Page:Go to website
Last Update:June 18, 2024
License:MIT

Preview:

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

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="{}"
  hideBranding="false" // show/hide branding
>
</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.6.18 (06/18/2024)

  • security patch

v2.6.16 (06/01/2024)

  • Update

v2.6.15 (05/15/2024)

  • Workaround to make all-day events with Yahoo work again.

v2.6.14 (04/30/2024)

  • optimizing default font
  • fixing date button allday issue

v2.6.13 (04/16/2024)

  • fixing all kinds of smaller bugs
  • optimizing handling of cancelled events

v2.6.12 (04/13/2024)

  • Bugfixes

v2.6.11 (04/09/2024)

  • Bugfixes

v2.6.10 (04/04/2024)

  • Aria label fix
  • better Google Calendar subscription support on mobile

v2.6.9 (03/20/2024)

  • no more startDate required for subscribe butons
  • PRO call-to-action form fix
  • enhancing Aria labels at the button level

v2.6.8 (03/18/2024)

  • bugfix

v2.6.7 (03/16/2024)

  • bugfix

v2.6.6 (03/14/2024)

  • extending rich data with eventStatus default

v2.6.5 (03/12/2024)

  • Fixing more racing conditions

v2.6.4 (03/12/2024)

  • Fix for Angular binding values late

v2.6.3 (03/12/2024)

  • Fixing edge case race conditions

v2.6.2 (03/12/2024)

  • bugfixes
  • dropping default rich data images
  • optimized validation flow

v2.6.1 (03/10/2024)

  • css: modal text var
  • proxy override for PRO
  • fixes for Apple messing around with JS

v2.6.0 (03/01/2024)

  • new option useUserTZ
  • adding css ::part support
  • adding support for formatting inside a url at description
  • fixes

v2.5.10 (02/06/2024)

  • Time zone database update
  • Allow query on urls
  • proKey case fix

v2.5.9 (01/30/2024)

  • Dropdown now available for date style button (also acting as new default)
  • Fixing schema.org default image (set option to “[]” to disable)
  • Dropping iOS non-Safari workaround for givenIcsFile
  • style optimization
  • new css variables, like customizable font-weight
  • fixes

v2.5.8 (01/08/2024)

  • Style optimization

v2.5.7 (01/01/2024)

  • Better types
  • Workaround for Outlook not parsing ampersand in event title

v2.5.6 (12/28/2023)

  • uid generation if not given
  • index.d.ts export paths

v2.5.5 (12/20/2023)

  • Optimizing style of branding.

v2.5.4 (12/20/2023)

  • Style optimization
  • Fixing a bug with forceOverlay option + modal
  • allowing proKey attribute to be used all lower case

v2.5.3 (12/17/2023)

  • Bugfixes

v2.5.1 (12/17/2023)

  • Bugfixes

v2.5.0 (12/13/2023)

  • Default branding activated in order to support this free open source project (if you do not want to support this project, use the hideBranding option to disable it)
  • If you want to customize calendar option labels, you need need to do this via the customLabels option
  • Some inline style got moved to the css. If you use your own custom css, double-check
  • new optionsMobile und optionsIOS options to specify device-specific calendar types
  • more css var options and subtle style fixes
  • bundle-size optimization option
  • attendee optimization
  • a lot of fixes

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)

You Might Be Interested In:


Leave a Reply