Install the package from the npm registry.
npm install add-to-calendar-button
Import the module into the component, where you want to use the button.
import 'add-to-calendar-button';
Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.
Yes, it is that simple.
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>
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.