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.

NameTypStandardBeschreibung
eventsCalendarEvent<T>[][]Array von Ereignissen, die im Kalender angezeigt werden
view'month' | 'week' | 'day' | 'year''month'Aktueller Ansichtstyp (Zwei-Wege-Bindung mit viewChange)
selectedDateDatenew Date()Aktuell fokussiertes Datum (Zwei-Wege-Bindung mit dateChange)
configCalendarConfig{}Konfigurationsoptionen für den Kalender
eventClassstring | ((event: CalendarEvent) => string)undefinedCSS-Klasse(n), die auf Ereignisse angewendet werden; kann statisch oder dynamisch sein
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 60Tag, 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.

NameTypBeschreibung
eventClickCalendarEvent<T>Wird ausgelöst, wenn auf ein Ereignis geklickt wird
dayClickCalendarDay<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
viewChangeCalendarViewTypeWird ausgelöst, wenn sich der Ansichtstyp ändert
dateChangeDateWird ausgelöst, wenn die Navigation das angezeigte Datum ändert

Templates

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

NameBeschreibungBeispiel
eventTptTemplate zum Rendern einzelner Ereignisse. Kontext: { event: CalendarEvent }<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>
dayCellTptTemplate 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.