Needless UI

Komponenten

Terminplaner

Termine in Monats-, Wochen-, Tages- oder Agendaansicht, an ihren Platz gezogen.

Import

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

Termine in der Monats-, Wochen-, Tages- oder Agendaansicht.

Selektor
nui-scheduler
NameTypStandardwertBeschreibung
eventsInputNuiSchedulerEvent<T>[][]Die anzuzeigenden Termine.
viewTwo-Way'month' | 'week' | 'day' | 'agenda''week'Die angezeigte Ansicht.
viewsInputNuiSchedulerView[]all fourDie Ansichten, zwischen denen man wechseln kann.
dateTwo-WayNuiDatetodayDer angezeigte Tag, auf dem auch der Tastaturfokus steht.
slotMinutesInputnumber30Minuten pro Zeile des Zeitrasters und die Schrittweite, in der sich Termine verschieben.
scrollHourInputnumber8Die Stunde, die das Zeitraster beim Öffnen zeigt.
agendaDaysInputnumber30Wie viele Tage die Agenda vorausschaut.
editableInputbooleanfalseTermine lassen sich verschieben und in der Dauer ändern, per Zeiger und per Tastatur.
selectableInputbooleanfalseIm Grid lässt sich Zeit markieren, um Termine anzulegen.
firstDayInput1 … 7Der erste Tag der Woche, 1 für Montag. Standardmäßig der aus der Locale.
headingLevelInputnumber2Die Überschriftenebene des Titels; die Tage der Agenda liegen eine Ebene tiefer.
localeInputstringLOCALE_IDFormatiert Tage und Uhrzeiten.
labelsInputPartial<NuiSchedulerLabels>Alle Texte, die der Terminplaner anzeigt oder ansagt, zum Übersetzen.
cornersInputNuiCornersDie Form der Ecken: round, squircle, bevel, scoop, notch oder square.
radiusInputNuiRadiusWie groß die Ecken sind: none, small, medium, large oder full.
densityInputNuiDensityWie viel Platz die Komponente einnimmt: compact, regular oder roomy.
eventClickOutputNuiSchedulerEvent<T>Emittiert einen angeklickten oder mit Enter geöffneten Termin.
eventChangeOutput{ event, start, end }Emittiert die neuen Zeiten eines Termins nach dem Verschieben oder Ändern der Dauer.
slotSelectOutput{ start, end, allDay }Emittiert die im Grid markierte Zeit.
rangeChangeOutput{ start, end }Emittiert den ersten und letzten angezeigten Tag, wenn sie sich ändern.

Anpassungs-Inputs, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiSchedulerEvent

Ein Termin. Das Ende eines Termins mit Uhrzeit ist nicht eingeschlossen; bei einem ganztägigen Termin ist das Ende sein letzter Tag.

NameTypStandardwertBeschreibung
id, titleEigenschaftstringSein Schlüssel und was er anzeigt.
start, endEigenschaftNuiDateTime | NuiDateDatum mit Uhrzeit oder, bei ganztägigen Terminen, nur das Datum.
allDayEigenschaftbooleanStandardmäßig gesetzt, wenn start keine Uhrzeit hat.
toneEigenschaft'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Seine Farbe.
editableEigenschaftbooleanOb er sich verschieben lässt, unabhängig davon, was der Terminplaner vorgibt.
dataEigenschaftTAlles Weitere, das du mit ihm aufbewahren willst.

NuiSchedulerEventTemplate

Zeichnet Termine. Der Kontext enthält den Termin und seine Zeit als Text.

Selektor
ng-template[nuiSchedulerEvent]