How to install the Add to Calendar Button with React

Step 0: Pick a solution

As React projects can be very versatile, there are multiple potential ways to work with the Add to Calendar Button.

• In rather basic projects, you can use the Web Component out-of-the-box.
• Alternatively, you can use the official Add to Calendar Button React Wrapper instead of the main script. This comes with a deeper TypeScript and React integration.

We will highlight all options below.

Step 1: npm installation

Option A: Web Component

Install the package from the npm registry.

npm install add-to-calendar-button

Option B: React Wrapper

If you rather go with the more specialized React Wrapper, install the following package instead:

npm install add-to-calendar-button-react

Step 2: Import it

Option A: Web Component

Import the module into the component, where you want to use the button.

import 'add-to-calendar-button';

Option B: React Wrapper

With the React Wrapper implementation, the import statement looks a little bit different.

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

Step 3: Use it

Option A: Web Component

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

Your code block could look like the following.

<add-to-calendar-button
  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"
></add-to-calendar-button>

Option B: React Wrapper

If you went for the React Wrapper, you would specify a button by using the <AddtoCalendarButton> tag instead. Basically, you then use the imported React component instead of the custom element (Web Component).

Your code block would then look rather like this:

<AddToCalendarButton
  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"
></AddToCalendarButton>

Mind that with the Wrapper approach, you can provide Array options as actual Arrays, while with the Web Component, they need to be transformed to Strings!

Keep this style and specialties in mind when you look at more examples around here.
On other pages, we rather focus on the Web Component approach, but this can always easily transferred to the React Wrapper style.

Mind that the button only works on the client side! Add 'use client'; respectively.