Javascript
Version: 2.0.0
Add to calendar
A JavaScript add-to-calendar button for websites and apps. Let visitors save events to Google Calendar, Outlook, Apple Calendar and more.
How to use Add to Calendar
Easily integrate Add to Calendar into your website or app.
- 1
1. Link plugin library to your web page's resources
<head>
<!-- Add to calendar library -->
<script src="add-to-calendar.js"></script>
</head> - 2
2. Initialize the plugin on a page element
<a id="myButton">Add to calendar</a>
<!-- init Add to calendar -->
<script>new atc('#myButton');</script>
What features does Add to Calendar include?
A calendar button that fits your website.
Easy integration with websites and apps
Add a calendar button to event pages or booking confirmations, with event details ready to save.
Multiple calendar support
Offer Google Calendar, Outlook, Apple Calendar and other services so visitors can use their preferred calendar.
Customizable design
Style the button and menu to match your website and keep the event action consistent.
Event time zone settings
Set the event time zone alongside its start and end times for calendars used across different locations.
Detailed event information
Include a title, location, dates and description so visitors can save practical details with the event.
What accessibility features does Add to Calendar include?
Add to Calendar supports keyboard navigation and screen reader interaction.
Keyboard controls, focus management and labeled options support different ways of saving events. Flexible placement helps the menu fit your layout.
Keyboard Navigation
Open the menu, move between options and choose a calendar service using the keyboard.
Managed Focus
Managed focus helps keyboard users follow the menu interaction and identify the active option.
Collision Aware
The menu adjusts near screen edges to help keep calendar options visible in smaller spaces.
Alignment Control
Choose how the menu aligns with its button to fit the surrounding content and available space.
Screen Reader Support
Labeled options help screen readers identify calendar services so visitors can choose where to save an event.
Accessibility features are included only from the javascript version 2.X
Download Add to Calendar
Get Add to Calendar and bring it to your next project.
Choose the version that fits your project, or try the configurator to explore its options.
Get it nowSee it in action
- Easy to Integrate
- Cross-Browser Compatible
- Mobile-Optimized
- Accessibility-Friendly
Last release 2025-01-29
141 downloads 😍
See also...
38.8kDatedropperDatedropper
JavaScript date picker for forms and booking flows
8kTimeDropperTimeDropper
JavaScript time picker for scheduling and forms
420inLineinLine
Rich text editor for editing directly on the page