https://github.com/AddToCalendar/addtocalendar is now part of https://www.addevent.com/ and in future will be suspended at all. So, this is almost complete rewrite of that library.
Setup
Auto applying
- add JS to the page
- add
addtocalendar
class to element in which you want to add calendar button - add event parameters as a child of
.addtocalendar
Options
Default
-
language
is assumed as browser locale, but if it's not among predefined languages defaultLanguage will be used, i.e.en
-
calendars
calendars to show. Is and array. Possible values are:iCalendar, googleCalendar, outlook, yahoo
-
translations
key/value object containing translations. If some translation is missing default (en
) will be used
Translations
Default keys are:
buttonText
iCalendar
googleCalendar
outlook
yahoo
Override Options
- via global vatiables
atcOverrides
- via
data-atc-*
attributes
Notes
Options are applied in the following way:
settings = Object.assign(default, global variable, data-atc-*)
Event Parameters
-
date_start
in case it's passed viahtml
element it should be in ISO 8601 format; otherwise it's passed as regularDate
-
date_end
in case it's passed viahtml
element it should be in ISO 8601 format; otherwise it's passed as regularDate
title
description
location
Examples
Auto
in this case plugin will automatically find .addtocalendar
elements then will parse event and show it:
- Add JS
<script src="add-to-calendar.min.js" async></script>
or if you're using ES6:
import 'add-to-calendar';
- Add styles
<link href="add-to-calendar.css" rel="stylesheet" type="text/css">
<link href="themes/blue.css" rel="stylesheet" type="text/css">
- Place html
<span class="addtocalendar atc-style-blue">
<var class="atc_event">
<var class="atc_date_start">2018-09-05T12:00:00.000Z</var>
<var class="atc_date_end">2018-09-05T18:00:00.000Z</var>
<var class="atc_timezone">Europe/London</var>
<var class="atc_title">Star Wars Day Party</var>
<var class="atc_description">May the force be with you</var>
<var class="atc_location">Tatooine</var>
<var class="atc_organizer">Luke Skywalker</var>
<var class="atc_organizer_email">luke@starwars.com</var>
</var>
</span>
Manually (ES6)
- Install dependency
npm i @nicolai8/add-to-calendar
- Import method
import { createCalendar } from 'add-to-calendar';
- Call it with
element
,settings
andeventParams
const element = document.getElementById('addToCalendarButton');
const settings = {
language: 'jp',
};
const event = {
title: 'Event title',
date_start: new Date(),
date_end: new Date(),
};
createCalendar(element, settings, event);
Browser Support
* IE11 (.ics is working via Blob) (requires `startsWith` polyfill)
* last 2 versions of major browsers
Notes
Built on top of https://github.com/google/web-starter-kit with some updates to latest versions And also inspired by https://github.com/carlsednaoui/add-to-calendar-buttons