<p>Example of this <a href="https://github.com/jekuer/add-to-calendar-button">Add to Calendar Button</a></p>

<div class="atcb">
  <script type="application/ld+json">
    {
      "event": {
        "@context": "https://schema.org",
        "@type": "Event",
        "name": "Add the title of your event",
        "description": "A nice description does not hurt",
        "startDate": "02-21-2022T10:13",
        "endDate": "03-24-2022T17:57",
        "location": "Somewhere over the rainbow"
      },
      "label": "Add to Calendar",
      "options": [
        "Apple",
        "Google",
        "iCal",
        "Microsoft365",
        "Outlook.com",
        "Yahoo"
      ],
      "timeZone": "Europe/Berlin",
      "timeZoneOffset": "+01:00",
      "trigger": "click",
      "iCalFileName": "Reminder-Event"
    }
  </script>
</div>
@import "https://cdn.jsdelivr.net/npm/add-to-calendar-button/assets/css/atcb.min.css";

html {
  font: 110%/1.4 system-ui;
}
import { atcb_init } from "https://cdn.skypack.dev/add-to-calendar-button";

atcb_init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.