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';
To make Angular work properly with the Web Component, you need to import the CUSTOM_ELEMENTS_SCHEMA and update the @NgModule/@Component block respectively.
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
//(...)
@NgModule({
//(...),
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
//(...)
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-10-20"
endDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
></add-to-calendar-button>
To bind data to a specific attribute, you need to use the syntax [attr.PARAMETER]="your data".
Based on your setup, the data flow might happen after the first rendering of the button. This is no problem, but you might see errors in the console when in debug mode, claiming there is data missing. Mind that due to this reason, binding the "identifier" option would not work.
<add-to-calendar-button
[attr.name]="titleVar"
options="'Apple','Google'"
[attr.startDate]="dateVar"
></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.