Getting started with Add to calendar

"Add to calendar" is a javascript library built to create an "add to calendar" button for web applications and mobile apps. Get started by installing "Add to calendar" on your website and initializing it on one or more elements.

How to install Add to calendar

Get "Add to calendar" and you will then be able to download source file for a direct integration into your website.

Add add-to-calendar.js to the <head> of the pages on which "Add to calendar" is being used, as described in the following example:

<head>
  ... 
  <!-- Add to calendar -->
  <script src="add-to-calendar.js"></script>
</head>

How to initialize Add to calendar

Once the installation is complete, initialize "Add to calendar" on elements that will trigger the add to calendar dropdown.

Generally "Add to calendar" is initialized on <button> with the class atc-button but you can manually initialize it also on every element you want.

In this example we will convert a simple <a> with specific id to an "add to calendar" button:

<a id="myButton">Add to calendar</a>

<!-- init Add to calendar -->
<script>
new atc(document.querySelector('#myButton'));
</script>

Make sure you initialize "Add to calendar" after the element is already on page or when page is loaded.