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
Import the module into the component, where you want to use the button.
import { AddToCalendarButton } from 'add-to-calendar-button-react';
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-10-20"
endDate="2024-10-20"
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.
Not your tech stack?
Check out the "Installation" section!
We have strong guides and solutions for all big frontend stacks as well things like WordPress.
Find complete project examples per stack at Stackblitz: Click here .
More functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.