Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
add-to-calendar-button
Advanced tools
add-to-calendar-button
A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.
Your next Add to Calendar Button
The convenient JavaScript snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.
For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars. It's main goal is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script. Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.
The script integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.
In terms of system support, all modern browsers (Chrome, Edge, Firefox, Safari) on Windows, Mac, Android, and iOS as well as rather restricted webview environments like the Instagram in-app browser are supported.
▶️ Demo
See add-to-calendar-button.com for a live demo.
And remember to ⭐ star this repository in order to stay up-to-date and save it for later! 🤗
✨ Features
Simple and convenient integration of 1 or many buttons, configurable directly within the HTML code.
Supported Calendars
- Google Calendar.
- Yahoo Calender.
- Microsoft 365, Outlook, and Teams.
- Automatically generated iCal/ics files (for all other calendars, like Apple).
Event Types
- Timed and all-day events.
- One-time, multi-date, recurring, or fluid.
- Most robust time zone and daylight saving management (via our own TimeZones iCal Library).
- Dynamic dates (like "today + 3").
Look
- Beautiful and adjustable UI.
- Light and dark mode.
- Multiple themes.
Accessibility
- Optimized and adjustable UX (for desktop and mobile).
- Dynamic dropdown positioning.
- Taking care of all those edge cases, where some scenarios do not support specific setups (like WebView blocking downloads); utilizing beautiful user guidance workarounds.
- Auto-generated Schema.org rich (structured) data for better SEO.
- Full support for mouse, touch, or keyboard input (W3C WAI compliant).
- Supporting 20+ languages, incl. RTL text for Arabic; but also custom labels and text blocks.
And much more
- Well documented code, to easily understand the processes and build on top of it.
- No external module or backend dependencies.
- Therefore, fully GDPR, CCPA, and LGPD compliant - without the need of signing some data processing agreement.
- FREE and easy.
📦 Installation / Setup
Option 1: simple (CDN)
You can use the jsDeliver CDN and load the respective ressources into your web project.
Put the css (use atcb-3d for an alternative style) into the <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1/assets/css/atcb.min.css">
... and the javascript into the <body> footer:
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1" async defer></script>
Mind that this always pulls the latest release of v1! You can pin a more specific version by adding the exact version number after the "@" - see jsDeliver.com for details. If you want to rather host it yourself, you could also download the source files or clone the repository (mind to take the original one at github.com/add2cal/add-to-calendar-button) and maintain/update it manually.
Option 2: npm
Import the package using the following npm command:
npm install add-to-calendar-button
Import the module into your project/component. For example with Angular/React:
import { atcb_action, atcb_init } from 'add-to-calendar-button';
Either use atcb_action with your own buttons/forms/etc, or run atcb_init after the DOM has been loaded. To determine the right moment to execute the atcb_init, ...
- with Angular, you would use
ngAfterViewInit()withatcb_init();(mind that, depending on your app, other hooks might be better); - with React, you might want to include an event listener for
DOMContentLoadedor use a hook in a functional component likeuseEffect(() => atcb_init());.
Include the css. For example with Angular or React, add @import 'add-to-calendar-button/assets/css/atcb.css' to some other css file - or include it in other more direct ways (like adding import 'add-to-calendar-button/assets/css/atcb.css'; to the respective component) (use atcb-3d for an alternative style).
🎛️ Configuration
A button can be easily created by placing a respective placeholder, wherever you want the button to appear.
(The style="display:none;" theoretically is not necessary, but should be used for better compatibility.)
<div class="atcb" style="display:none;">(...)</div>
Within this placeholder, you can easily configure the button, by placing a respective JSON structure.
Mind that with Angular, you might need to escape the { with {{ '{' }} and } with {{ '}' }}; with React it would be { '{' } and { '}' }.
Minimal structure (required)
If there is no endDate set, the script assumes that it is the same as startDate.
Mind that for auto-generating rich snippets, a location would be mandatory as well. Even a timezone is not required, but recommended - if not given, the script will assume UTC.
<div class="atcb" style="display:none;">
{
"name":"Add the title of your event",
"startDate":"2022-02-21",
"options":[
"Google"
]
}
</div>
Typical structure
<div class="atcb" style="display:none;">
{
"name":"Add the title of your event",
"description":"A nice description does not hurt",
"startDate":"2022-02-21",
"endDate":"2022-03-24",
"startTime":"10:13",
"endTime":"17:57",
"location":"Somewhere over the rainbow",
"label":"Add to Calendar",
"options":[
"Apple",
"Google",
"iCal",
"Microsoft365",
"MicrosoftTeams",
"Outlook.com",
"Yahoo"
],
"timeZone":"Europe/Berlin",
"trigger":"click",
"inline":true,
"listStyle":"modal",
"iCalFileName":"Reminder-Event"
}
</div>
React examples
atcb_action
If you can't or don't want to use atcb_init, you can use the atcb_action import with your own buttons or other elements/components.
This may work better with React and other frontend frameworks, but it misses the Schema.org and button specific functionalities.
import React from 'react';
import { atcb_action } from 'add-to-calendar-button';
const MyComponent = () => {
const [name, setName] = React.useState("Some event");
const changeName = e => {
setName(e.target.value);
};
return (
<form onSubmit={e => {
e.preventDefault();
atcb_action({
name: name,
startDate: "2022-10-14",
endDate: "2022-10-18",
options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Outlook.com', 'Yahoo'],
timeZone: "Europe/Berlin",
iCalFileName: "Reminder-Event",
});
}}>
<input value={name} onChange={changeName} />
<input type="submit" value="save" />
</form>
);
}
atcb_init
Alternatively, you could use atcb_init with a useEffect hook:
import React from "react";
import { atcb_init } from "add-to-calendar-button";
import 'add-to-calendar-button/assets/css/atcb.css';
const MyComponent = () => {
React.useEffect( () => { atcb_init() }, []);
return (
<div className="atcb">
{ '{' }
"name":"Add the title of your event",
"description":"A nice description does not hurt",
"startDate":"2022-02-21",
"endDate":"2022-03-24",
"startTime":"10:13",
"endTime":"17:57",
"location":"Somewhere over the rainbow",
"label":"Add to Calendar",
"options":[
"Apple",
"Google",
"iCal",
"Microsoft365",
"Outlook.com",
"Yahoo"
],
"timeZone":"Europe/Berlin",
"iCalFileName":"Reminder-Event"
{ '}' }
</div>
);
}
By the way: Both functions return an array, holding the IDs of the generated buttons!
All options and hidden features
Find all information about the available options and how to configure specific features at the DOCS.md.
⚡ Changelog
Find all changes in the dedicated file at CHANGELOG.md.
🙌 Contributing
Anyone is welcome to contribute, but mind the guidelines:
IMPORTANT NOTE: Run npm install, npm run format, and npm run build to auto-lint and create the minified js, css, as well as its sourcemap files!
📃 Copyright and License
Copyright (c) Jens Kuerschner.
Licensed under Apache-2.0 (with “Commons Clause” License Condition v1.0).
💜 Kudos go to
uxwing.com as well as all contributors:
FAQs
A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.
The npm package add-to-calendar-button receives a total of 22,789 weekly downloads. As such, add-to-calendar-button popularity was classified as popular.
We found that add-to-calendar-button demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 28 Nov 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025