Author: | jekuer |
---|---|
Views Total: | 6 views |
Official Page: | Go to website |
Last Update: | April 23, 2022 |
License: | MIT |
Preview:

Description:
Add-to-Calendar Button is a JavaScript library that lets you add custom events to popular calendars (like Google Calendar, Yahoo Calendar, Outlook, Microsoft 365) and automatically generates iCal/ics files for other calendar services like Apple.
How to use it:
1. Add the Add-to-Calendar Button’s Stylesheet and JavaScript to the page.
<link rel="stylesheet" href="css/atcb.min.css" /> <script src="js/atcb.min.js"></script>
2. Insert your event data (JSON) into a hidden DIV container with the CSS class of atcb
. That’s it.
<div class="atcb" style="display:none;"> { "name":"Event Title", "startDate":"2022-02-24", "endDate":"2022-02-28", "options":[ // add/remove calendars here "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], } </div>
3. You can also define your event data in JSON-LD format.
<div class="atcb"> <script type="application/ld+json"> { "event": { "@context":"https://schema.org", "@type":"Event", "name":"Event Title", "description":"Event Description", "startDate":"2022-02-24T10:24", "endDate":"2022-02-28T18:56", "location":"Your Location" }, "label":"Add to Calendar", "options":[ "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], } </script> </div>
4. Trigger the Add-to-Calendar menu on click instead.
<div class="atcb" style="display:none;"> { "name":"Event Title", "startDate":"2022-02-24", "endDate":"2022-02-28", "options":[ // add/remove calendars here "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "trigger":"click", } </div>
5. Add more detailed information to your event.
<div class="atcb" style="display:none;"> { "name":"Event Title", "startDate":"2022-02-24", "endDate":"2022-02-28", "options":[ // add/remove calendars here "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "startTime":"10:24", "endTime":"18:56", "location":"Your Location", "label":"Text Displayed In The Button", } </div>
6. The library also works with timezone:
<div class="atcb" style="display:none;"> { "name":"Event Title", "startDate":"2022-02-24", "endDate":"2022-02-28", "options":[ // add/remove calendars here "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "timeZoneOffset":"+01:00", } </div>
7. Customize the iCal/ics file name.
<div class="atcb" style="display:none;"> { "name":"Event Title", "startDate":"2022-02-24", "endDate":"2022-02-28", "options":[ // add/remove calendars here "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "iCalFileName":"MY-Event" } </div>
Changelog:
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)