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 17 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`variant`	`string`	`undefined`	Semantischer Akzent für den heutigen und den ausgewählten Tag, die aktive Ansichtsschaltfläche und die Ereignis-Chips: primary, secondary, success, danger, warning, info, neutral, light, dark oder ein beliebiger eigener Name, der als --hub-sys-color-<variant> gelesen wird.
`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 selectedDateChange)
`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 \| undefined`	`undefined`	Tag, an dem die Woche beginnt (0 = Sonntag, 1 = Montag usw.). Hat Vorrang vor config.weekStartsOn, wenn gesetzt; sonst entscheidet die Konfiguration mit dem Standard 0.
`locale`	`string`	`'en'`	Sprachcode für das integrierte Wörterbuch. Englisch und Spanisch werden mitgeliefert; jeder andere Code fällt auf Englisch zurück.
`height`	`number \| string`	`undefined`	Höhe des Kalenders, die auch entscheidet, ob er scrollt oder wächst. Eine Zahl wird als Pixel gelesen; jede CSS-Länge ist möglich, und `auto` wächst mit dem Inhalt, statt zu scrollen. Ohne Wert füllt der Kalender seinen Container. Besser als eine Stylesheet-Regel: Ein `hub-calendar { … }`-Selektor mit Komponenten-Scope schlägt das eigene Layout der Komponente und kann es zerstören.
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Wie der Kopftitel Monat und Jahr schreibt. Nimmt Intl-Optionen, ein Angular-Datumsmuster wie `MMMM yyyy` oder eine Funktion. Ohne Wert gilt die eingebaute Zusammensetzung; die Jahresansicht, deren Titel ein Jahr nennt, bleibt unberührt.
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	Intl-Optionen für die Uhrzeit in den Tooltips des Chips und des Tages, zusammengesetzt mit `hourFormat`. Standard: Stunde und Minuten.
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Die Uhrzeit, die ein Chip der Monatsansicht vor einem terminierten Ereignis druckt. Ohne Wert bleibt die Abkürzung, die für die schmale Zelle gedacht war: Minuten entfallen, wenn sie null sind.
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Die Beschriftungen des Stundenlineals der Wochen- und Tagesansicht. Ohne Wert bleiben sie das schlichte `9:00` von jeher; allein `hourFormat` macht eine echte Uhr daraus.
`hourFormat`	`'12' \| '24'`	`undefined`	Erzwingt eine 12- oder 24-Stunden-Uhr überall dort, wo der Kalender eine schreibt. Ohne Wert entscheidet die Sprache — dieselbe Bedeutung wie in `hub-datepicker`.
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	Breite der Wochentags-Spaltenköpfe. `short` und `long` lesen das Wörterbuch des Kalenders, das ein Anwendungswörterbuch damit erreicht; `narrow` hat dort keinen Eintrag und wird aus der Sprache abgeleitet.
`monthFormat`	`'short' \| 'long'`	`'long'`	Wie der Monat im Kopftitel und auf den Karten der Jahresansicht geschrieben wird. Standardmäßig `long`, wie der Kalender es immer gedruckt hat.
`compact`	`boolean`	`false`	Zeichnet den Kalender als Mini-Monat: die Leiste verschwindet, ebenso die Mindesthöhen für Tag und Woche, die Kopfzeilen schrumpfen auf die Initialen der Sprache, und ein Tag mit Terminen trägt einen Punkt statt Chips. Die Monatsüberschrift bleibt. Mit `booleanAttribute` transformiert — das bloße Attribut `compact` genügt.

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>`