How to install the Add to Calendar Button with Next.js

Step 1: npm installation

Since Nextjs does not play that nicely with web components, we strongly recommend to use our official Add to Calendar Button React Wrapper instead of the default one.

It already mitigates all the potential problems and issues.

npm install add-to-calendar-button-react

Step 2: Import it

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

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

Step 3: Use it

Start using it by adding a <AddtoCalendarButton> tag to your source code.

Yes, it is that simple.

Your code block could look like the following.

<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 the button only works on the client side! Add 'use client'; respectively.