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 ProKey.

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

interface Props {
  prokey: AddToCalendarButtonType['proKey'];
}

const { prokey } = Astro.props as Props;

Add the script

Add the web component tag:

<add-to-calendar-button prokey={prokey} />

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 prokey="prokey-of-your-event" />
</Layout>

Yes, it is that simple.