How to install the Add to Calendar Button with Astro

Step 0: Pick the best solution

You can simply load the Add to Calendar Button script via CDN and integrate as described at the default HTML guide. However, this some at some cost and you would need to take precaution to only load and render it on the client.

We recommend to use the React wrapper npm package, create a custom JSX component, and then integrate this component with 'client:only="react"' attribute.

Step 1: Setup

Create a new component

Create a new component in the components folder and name it "AddtoCalendarButton.tsx". If you have multiple buttons, you can either create multiple components or make it accept the props you need to customize it.

Add the React wrapper package

Install the package from the npm registry.

npm install add-to-calendar-button-react

import { AddToCalendarButton } from 'add-to-calendar-button-react';

Step 2: Define the button

Define the button in your new component. In our example, we also added a label prop to illustrate how you can make it more dynamic.

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

export default function atcb(props: AddToCalendarButtonType) {
  return (
    <AddToCalendarButton
      label={props.label}
      name="Title"
      options="'Apple','Google'"
      location="World Wide Web"
      startDate="2024-12-23"
      endDate="2024-12-23"
      startTime="10:15"
      endTime="23:30"
      timeZone="America/Los_Angeles"
      options="'Apple','Google','iCal','Outlook.com','Yahoo'"
    ></AddToCalendarButton>
  );
}

Step 3: Use it

You can now import this component wherever you need it and use it like any other Astro component.

Your code block could look like the following.

---
import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
import Layout from '../layouts/Layout.astro';
---
<Layout>
<AddToCalendarButton client:only="react" label="Woohooo" />
</Layout>

Yes, it is that simple.