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

Category: Date & Time , Javascript , Recommended | April 23, 2022
Author:jekuer
Views Total:6 views
Official Page:Go to website
Last Update:April 23, 2022
License:MIT

Preview:

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

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)

You Might Be Interested In:


Leave a Reply