How to install the Add to Calendar Button with Astro

Step 0: Pick the right architecture

You can use the web component directly wherever you need it or indirectly via a component (like add-to-calendar.astro, which gets imported at the respective page).

We recommend the direct approach, if you only use 1 element. More than 1, go with the helper component. Below, we describe the helper component way. If you use it directly, simply do not create the component, but include the add-to-calendar-button tag directly where you need it.

Step 1: Install the package

Install the package from the npm registry.

npm install add-to-calendar-button

Step 2: Create the component

Create a new component add-to-calendar.astro (usually at ./src/components/).

Step 3: Define the props

Define the props of the component. This should at least be the start date and name.

import type { AddToCalendarButtonType } from 'add-to-calendar-button';

interface Props {
  name: AddToCalendarButtonType['name'];
  startDate: AddToCalendarButtonType['startDate'];
  endDate: AddToCalendarButtonType['endDate'];
  startTime: AddToCalendarButtonType['startTime'];
  endTime: AddToCalendarButtonType['endTime'];
  timeZone: AddToCalendarButtonType['timeZone'];
}

const { name, startDate, endDate, startTime, endTime, timeZone } = Astro.props as Props;

Add the script

Add the web component tag:

<add-to-calendar-button
  name={name}
  start-date={startDate}
  end-date={endDate}
  start-time={startTime}
  end-time={endTime}
  time-zone={timeZone}
></add-to-calendar-button>

Followed by the script import:

<script>
  import 'add-to-calendar-button';
</script>

Step 4: Use it

On any other page (or component), import and use it. Set the path the way your project is set up.

Your code block could look like the following.

---
import AddToCalendarButton from '../components/add-to-calendar.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <AddToCalendarButton
    name="Title"
    start-date="2026-09-20"
    end-date="2026-09-20"
    start-time="10:15"
    end-time="23:30"
    time-zone="EST"
  />
</Layout>

Yes, it is that simple.

Styles & languages

The script ships with the "default" button style and the English language pack built in - so the button looks great and works out of the box without any extra configuration.

Every other style and language loads automatically on demand (a few KB each) the moment you reference it - no manual wiring needed.

Bundling via npm (recommended for frameworks)

When you bundle the script, import the style and language modules you need so they register fetch-free at build time. Simply add the corresponding import statements anywhere in your entry file (or the component that uses the button):

import 'add-to-calendar-button/styles/3d';   // any style besides "default"
import 'add-to-calendar-button/i18n/de';       // any language besides English

See the "button-style" and "language" options at the Configuration page for the full picture.

Server Side Rendering (SSR)

The button can also pre-render a shell on the server for an instant, layout-stable first paint. See the "Server-side rendering" section on the advanced-use page. Server-side rendering

A full example could look like this.

---
// add-to-calendar.astro
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';

const html = atcb_generate_ssr_html({
  name: 'Reminder to check the add-to-calendar-button demo',
  options: ['Apple', 'Google'],
  location: 'World Wide Web',
  startDate: '2050-06-15',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
});
---
<Fragment set:html={html} />
<script>
  import 'add-to-calendar-button'; // client-side upgrade
</script>