Add Events To Apple/Google/Yahoo/MicroSoft Calendars – atcb.js

Preview:

Description:

Add-to-Calendar Button is a JavaScript library that lets you add custom events to popular calendars (like Google Calendar, Yahoo Calendar, Outlook, Microsoft 365) and automatically generates iCal/ics files for other calendar services like Apple.

How to use it:

1. Add the Add-to-Calendar Button’s Stylesheet and JavaScript to the page.

<link rel="stylesheet" href="css/atcb.min.css" />
<script src="js/atcb.min.js"></script>

2. Insert your event data (JSON) into a hidden DIV container with the CSS class of atcb. That’s it.

<div class="atcb" style="display:none;">
  {
    "name":"Event Title",
    "startDate":"2022-02-24",
    "endDate":"2022-02-28",
    "options":[
      // add/remove calendars here
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
  }
</div>

3. You can also define your event data in JSON-LD format.

<div class="atcb">
  <script type="application/ld+json">
    {
      "event": {
        "@context":"https://schema.org",
        "@type":"Event",
        "name":"Event Title",
        "description":"Event Description",
        "startDate":"2022-02-24T10:24",
        "endDate":"2022-02-28T18:56",
        "location":"Your Location"
      },
      "label":"Add to Calendar",
      "options":[
        "Apple",
        "Google",
        "iCal",
        "Microsoft365",
        "Outlook.com",
        "Yahoo"
      ],
    }
  </script>
</div>

4. Trigger the Add-to-Calendar menu on click instead.

<div class="atcb" style="display:none;">
  {
    "name":"Event Title",
    "startDate":"2022-02-24",
    "endDate":"2022-02-28",
    "options":[
      // add/remove calendars here
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
    "trigger":"click",
  }
</div>

5. Add more detailed information to your event.

<div class="atcb" style="display:none;">
  {
    "name":"Event Title",
    "startDate":"2022-02-24",
    "endDate":"2022-02-28",
    "options":[
      // add/remove calendars here
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
    "startTime":"10:24",
    "endTime":"18:56",
    "location":"Your Location",
    "label":"Text Displayed In The Button",
  }
</div>

6. The library also works with timezone:

<div class="atcb" style="display:none;">
  {
    "name":"Event Title",
    "startDate":"2022-02-24",
    "endDate":"2022-02-28",
    "options":[
      // add/remove calendars here
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
    "timeZone":"Europe/Berlin",
    "timeZoneOffset":"+01:00",
  }
</div>

7. Customize the iCal/ics file name.

<div class="atcb" style="display:none;">
  {
    "name":"Event Title",
    "startDate":"2022-02-24",
    "endDate":"2022-02-28",
    "options":[
      // add/remove calendars here
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
    "iCalFileName":"MY-Event"
  }
</div>

Changelog:

v1.8.3 (04/23/2022)

• Minor style fixes
• Closing lists on screen resize

v1.8.2 (04/19/2022)

• Bugfixes

v1.8.1 (04/18/2022)

• Fixing 3D issues with Safari

v1.8.0 (04/18/2022)

• New button style on hover as well as smaller changes to the code structure as well as some fixes.

v1.7.7 (04/15/2022)

• Optimizing it for touch. No longer closing an open list when only scrolling.

v1.7.5 (04/10/2022)

• Stripping HTML tags (except) to clean up any mess external tools (e.g. Apple’s Safari or Browser extensions) might do to the JSON.

v1.7.4 (04/09/2022)

• Extending the date+time support from schema.org setups to all implementations.
• Auto-cleaning date and time strings from seconds and milliseconds.

v1.7.3 (04/09/2022)

• Adding css files to export statement.
• test step to support server side rendering
• Minor fixes

v1.7.2 (03/17/2022)

• Fixing some styling issues
• Optimizing code structure

v1.7.1 (03/17/2022)

• Fixes and changes to new v1.7 export magic.

v1.7.0 (03/17/2022)

• Rework of general code structure
• New way to use the logic with custom elements/buttons
• tons of optimization

v1.6.4 (03/14/2022)

• Fixing bugs, which broke events that missed description or location

v1.6.3 (03/08/2022)

• bug fixes, import optimization

v1.6.2 (03/04/2022)

• Removing real in-code line breaks before parsing the innerHTML JSON to prevent parsing errors. You can still add line breaks to the description in the documented way (using or \n explicitely)