Author: | jekuer |
---|---|
Views Total: | 80 views |
Official Page: | Go to website |
Last Update: | September 18, 2023 |
License: | MIT |
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)