Please enable JavaScript to view this website.

How to install the Add to Calendar Button with Astro

Step 0: Pick a solution

For static site generators (SSG), we generally recommend to load the Add to Calendar Button script via CDN.
Alternatively, you can still use the npm package and include the module via an observer function.

We will highlight all options below.

Choose your fighter!

Step 1: Setup

Option A: Integrate via CDN

Load the respective script by adding the following script tag to the head section of your website.
The script will be loaded in a non-blocking way. So you don't need to worry about where to include it exactly.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

Option B: npm installation

Alternatively, install the package from the npm registry.

npm install add-to-calendar-button
...and setup an Observer to load the script properly:
<script type="module" hoist>
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      observer.disconnect();
      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
    }
  });
  const instances = document.querySelectorAll('add-to-calendar-button');
  for (const instance of instances) observer.observe(instance);
</script>

Step 2: Use it

Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.

Yes, it is that simple.

Your code block could look like the following:

<add-to-calendar-button
  name="Title"
  options="'Apple','Google'"
  location="World Wide Web"
  startDate="2024-02-09"
  endDate="2024-02-09"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
></add-to-calendar-button>
Get blown away by the PRO offering

Discover the PRO offering

More functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.


Legal Notice | Privacy Policy | License | Help
© 2024 , Current Version: 2.5.10