Wie man den Add to Calendar Button unter Angular installiert

Schritt 1: npm Installation

Installiere das Package über die npm Registry.

npm install add-to-calendar-button

Schritt 2: Import

Importiere das Modul in deine Komponente, in welcher du den Button nutzen möchtest.

import 'add-to-calendar-button';

Schritt 3: Optimiere die Angular-Konfiguration

Damit Angular sauber mit Web Components arbeitet, musst du das CUSTOM_ELEMENTS_SCHEMA importieren und den @NgModule/@Component-Block entsprechend aktualisieren.

// app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
//(...)

@NgModule({
  //(...),
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
//(...)

Schritt 4: Loslegen

Beginne mit der Nutzung, indem du einen <add-to-calendar-button> Tag in deinem HTML-Quellcode einfügst - mit den Optionen als Attribute.

Ganz genau - es ist derart einfach.

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  name="Titel"
  options="'Apple','Google'"
  location="World Wide Web"
  startDate="2024-12-23"
  endDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  language="de"
></add-to-calendar-button>

Bindings richtig nutzen

Um eine Variable an ein bestimmtes Attribut zu binden, musst du den Syntax [attr.PARAMETER]="your data" nutzen.

Basierend auf deinem Setup werden Daten erst nach dem ersten Rendering des Buttons übermittelt. Dies ist kein Problem, führt aber zu Fehlermeldungen über fehlende Daten in der Console, sofern du dich im Debug-Modus befindest. Beachte, dass ein Binding für die "identifier"-Option aus diesem Grund nicht funktioniert.

<add-to-calendar-button
  [attr.name]="titleVar"
  options="'Apple','Google'"
  [attr.startDate]="dateVar"
></add-to-calendar-button>