add-to-calendar-button
Advanced tools
A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.
A convenient JavaScript snippet (VanillaJS, React, Angular, ...), which lets you create beautiful buttons, where people can add events to their calendars.
This is for everybody, who wants to include a button at his/her 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.
See add2cal.github.io/add-to-calendar-button for a live demo.
And remember to ⭐star this repository in order to save it for later! 🤗
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/assets/css/atcb.min.css">
... and the javascript into the <body> footer:
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button" async defer></script>
Mind that this always pulls the latest version! You can pin a specific one by adding "@" + the version number after "button" - 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.
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, ... - with Angular, you would use ngAfterViewInit() with atcb_init(); (mind that, depending on your app, other hooks might be better); - with React, you might want to include an event listener like document.addEventListener('DOMContentLoaded', atcb_init, false); or using hooks in a functional component like useEffect(() => atcb_init());
Include the css. For example with Angular or React, add @import 'add-to-calendar-button/assets/css/atcb.min' 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).
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 { '}' }.
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.
<div class="atcb" style="display:none;">
{
"name":"Add the title of your event",
"startDate":"2022-02-21",
"options":[
"Google"
]
}
</div>
(More hidden options are described further below.)
<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>
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,
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>
);
}
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>
);
}
label is optional, but enables you to customize the button text. Default: "Add to Calendar".today as date. It will then dynamically use the current day at click.+5 at the end of the date to dynamically add 5 days (or any other number). 2022-01-30+12 would generate the 11th of February 2022. This can be interesting, when combined with today.timeZone (TZ name). Find a list of them at Wikipedia.timeZoneOffset, which will always override the timeZone. If neither of them is set, the date refers to UTC time.timeZone option is recommended since it considers things like summer/winter time, but might not work in very old browsers. timeZoneOffset works with older browsers, but is quite static.timeZone to dynamically use the time of the user's browser. Use this with caution, since it would mean that the date and time will differ per user, which should not be the usual case! (Requires all times to be set.)language option. Supported options and therefore languages: en (default), de.customLabels and provide a JSON object where the key would be the text block's identifier (lower case without spaces). See the bottom of the js file for possible text blocks. You can use HTML pseudo tags, which get transformed automatically. Suported ones: [url] (see next point), [br], [hr], [p], [strong], [u], [i], [em], [li], [ul], [ol], [h*] (like h1, h2, h3, ...).[url]https://....[/url] makes it clickable. [url]https://....|URL Text[/url] defines a linked textblock saying "URL Text" (not supported by Apple, iCal, and Yahoo; not supporting special characters).trigger to click. This makes the button open on click at desktop. Otherwise, the default would be to open on hover. On touch devices, this makes no difference.iCalFileName option. The default would be "event-to-save-in-my-calendar".icsFile option."inline":true in order to make the button appear with inline-block instead of block style."background":false if you want to be the background overlay to be fully transparent.listStyle to "modal" in order to force the modal version (this would also force the click trigger).\n or <br>."identifier":"xyz" (no special characters allowed; needs to be unique).Anyone is welcome to contribute, but mind the guidelines:
IMPORTANT NOTE: Run npm install, npm run format, and npm run build to auto-lint, create the minified js and css files, its sourcemap files as well as the npm_dist/ folder and content!
Find all changes in the dedicated file at CHANGELOG.md.
Copyright (c) Jens Kuerschner.
Licensed under MIT license (with “Commons Clause” License Condition v1.0).
While building a personal wedding page, I was confronted with the task to include a button, where invited people could save the event to their calendars. I did not want to build this from scratch (first) and therefore started the usual web research. Unfortunately, all I found where some extremely outdated code snippets, which did not really fit all the modern systems and calendar tools. Beside that, there was only the solution by AddEvent.com - all over the place. I was looking at CodePen and all I found where thousands of pens, which basically only included the AddEvent tool, which is hardly connected to their paid services.
The problems with this and other solutions:
Bottom line: Paying for features, which I did not need - at additional privacy concerns - that made me create this solution (for you).
Fun fact: AddEvent changed a lot in the meantime. They slightly increased the free tier and also published some code on GitHub (but still require their service and also not open source!). This might be cool for businesses, but a killer for smaller projects. Anyhow, it is moving into the right direction 😊.
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 24,162 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 2 open source maintainers collaborating on the project.
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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.