Angular Calendar-Komponente | ng-hub-ui-calendar
Angular Calendar-Komponente mit Ereignisansichten, Drag-and-drop, Templates, Internationalisierung und CSS-Variablen für Scheduling-Oberflächen.
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 — 5 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 |
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> |
CSS-Variablen
Noch keine CSS-Variablen dokumentiert.
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.