Getting started guide of Add to calendar

Version:

On this page:

    Try the new Add to calendar configurator to easily get the best plugin configuration!
    Configure now

    "Add to Calendar" is a JavaScript library that allows you to create an "Add to Calendar" button for web and mobile applications. To use it, simply install "Add to Calendar" on your website and initialize it on your desired elements.


    Default Installation

    How to Install

    To start using "Add to Calendar," download the source file for direct integration into your website.

    Include add-to-calendar.js inside the <head> section of any page where you want to use the feature, as shown in the example below:

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

    How to Initialize

    Once installed, you need to initialize "Add to Calendar" on elements that will trigger the dropdown opening.

    By default, the library is initialized on <button> elements with the class atc-default. However, you can manually initialize it on any element you prefer.

    For example, to turn a simple <a> element into an "Add to Calendar" button, use the following code:

    <a id="myButton">Add to Calendar</a>
    
    <!-- Initialize Add to Calendar -->
    <script>
      new atc('#myButton');
    </script>
    

    Ensure that "Add to Calendar" is initialized only after the element is available on the page or when the page has fully loaded.


    WordPress Installation

    Add to calendar can also be installed on WordPress websites with ease. Follow these steps to set it up:

    Steps to Install the Plugin on WordPress:

    1. Log in to Your WordPress Dashboard

    Go to http://yourdomain.com/wp-admin and log in using your credentials.

    2. Navigate to the Plugins Section

    From the left-hand sidebar, click on Plugins, then select Add New.

    Add to calendar WordPress Installation

    3. Upload the Plugin

    Click the Upload Plugin button at the top, select the add-to-calendar.zip file, and click Install Now.

    4. Activate the Plugin

    Once the installation is complete, click the Activate button to enable the plugin.

    Add to calendar WordPress Installation

    5. Test the Plugin

    The plugin is now active and ready to use. To test it, add the following custom HTML code to any part of your WordPress site:

    <input class="atc-default">

    Accessibility Features

    "Add to calendar" is designed to provide an inclusive and user-friendly experience for everyone. Here’s how it ensures accessibility:

    Keyboard Navigation

    "Add to calendar" can be fully navigated using just the keyboard. You can open the "Add to calendar" dropdown, move between options, and make selections effortlessly with intuitive key bindings.

    Managed Focus

    The "Add to calendar" dropdown manages focus dynamically, ensuring smooth and predictable navigation. As you interact, focus is directed to relevant elements, minimizing confusion and simplifying the experience.

    Collision Awareness

    "Add to calendar" intelligently adjusts its position to avoid being displayed off-screen or overlapping critical content. This ensures it remains visible and easy to use in any context.

    Alignment Control

    You have complete control over the "Add to calendar" dropdown’s alignment. Whether you need it at the top, bottom, or sides, "Add to calendar" adapts to fit your layout perfectly.

    Screen Reader Support

    "Add to calendar" is fully compatible with screen readers. Every element is appropriately labeled, making it accessible for visually impaired users to navigate and interact with confidence.