API-Referenz

Hier ist der vollständige Vertrag für calendar: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle calendar mit 6 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`events`	`CalendarEvent<T>[]`	`[]`	Array von Ereignissen, die im Kalender angezeigt werden
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	Aktueller Ansichtstyp (Zwei-Wege-Bindung mit viewChange)
`selectedDate`	`Date`	`new Date()`	Aktuell fokussiertes Datum (Zwei-Wege-Bindung mit dateChange)
`config`	`CalendarConfig`	`{}`	Konfigurationsoptionen für den Kalender
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	CSS-Klasse(n), die auf Ereignisse angewendet werden; kann statisch oder dynamisch sein
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	Tag, an dem die Woche beginnt (0 = Sonntag, 1 = Montag usw.)

Outputs

Reagiere darauf, was calendar tut — 6 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`eventClick`	`CalendarEvent<T>`	Wird ausgelöst, wenn auf ein Ereignis geklickt wird
`dayClick`	`CalendarDay<T>`	Wird ausgelöst, wenn auf eine Tageszelle geklickt wird
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	Wird ausgelöst, wenn ein Ereignis auf einen anderen Tag gezogen wird
`viewChange`	`CalendarViewType`	Wird ausgelöst, wenn sich der Ansichtstyp ändert
`selectedDateChange`	`Date`	Wird ausgelöst, wenn sich das ausgewählte Datum ändert; unterstützt Two-Way-Binding über [(selectedDate)]
`dateChange`	`Date`	Wird ausgelöst, wenn die Navigation das angezeigte Datum ändert

Templates

Mach es zu deinem — 2 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`eventTpt`	Template zum Rendern einzelner Ereignisse. Kontext: { event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	Template zum Anpassen des Renderns von Tageszellen. Kontext: { day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`