As React projects can be very versatile, there are multiple potential ways to work with the Add to Calendar Button.
We will highlight all options below.
Choose your fighter!
Install the package from the npm registry.
npm install add-to-calendar-button
If you rather go with the more specialized React Wrapper, install the following package instead:
npm install add-to-calendar-button-react
Import the module into the component, where you want to use the button.
import 'add-to-calendar-button';
With the React Wrapper implementation, the import statement looks a little bit different.
import { AddToCalendarButton } from 'add-to-calendar-button-react';
This step is only necessary if you are NOT using the React Wrapper AND if you are working with TypeScript!
In this case, you would need to define a respective global JSX interface. You do this within a *.d.ts type file (like "global.d.ts"), which needs to be picked up by your tsconfig (there, you should specify the "typeRoots" option).
// global.d.ts
declare global {
namespace JSX {
interface IntrinsicElements {
['add-to-calendar-button']: CustomElement<AddToCalendarButton>;
}
}
}
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="2023-10-23"
endDate="2023-10-23"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
></add-to-calendar-button>
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="2023-10-23"
endDate="2023-10-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.
Check out the "Configuration" page for all available options and customization.
Start configuringOr explore more specific examples.
Start exploringNot 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 .