Import

import-calendar.ts
import { NuiCalendar, type NuiDateRange } from '@needless-ui/angular/calendar';

NuiCalendar

Ein Kalender zur Auswahl von Tagen.

Selektor
nui-calendar
NuiCalendar: Eigenschaften
NameTypStandardwertBeschreibung
selectionInput'single' | 'range' | 'multiple''single'Wie viele Tage sich wählen lassen.
valueTwo-WayNuiDate | nullnullDer gewählte Tag.
valuesTwo-WayNuiDate[][]Die gewählten Tage, chronologisch sortiert.
rangeTwo-WayNuiDateRange | nullnullDer gewählte Zeitraum, beide Enden eingeschlossen.
monthTwo-WayNuiMonth | nullnullDer angezeigte Monat; bei mehreren der erste.
viewTwo-Way'day' | 'month' | 'year''day'Tage, Monate oder Jahre.
min, maxInputNuiDate | nullDer erste und der letzte wählbare Tag.
unavailableInput(date: NuiDate) => booleanSchließt weitere Tage aus, etwa Feiertage.
monthsInputnumber1Monate nebeneinander.
weekNumbersInputbooleanfalseZeigt ISO-Kalenderwochen an.
firstDayInput1 … 7Der erste Tag der Woche, 1 für Montag. Standardmäßig der aus der Locale.
localeInputstringLOCALE_IDFormatiert Namen und Ziffern und bestimmt den ersten Tag der Woche.
labelsInputPartial<NuiCalendarLabels>Alle Texte, die der Kalender 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.
pickedOutputNuiDate | NuiDateRangeEmittiert jede Auswahl: einen Tag oder, sobald vollständig, einen Zeitraum.
focusDateMethode(date?: NuiDate) => voidSetzt den Tastaturfokus auf einen Tag und zeigt seinen Monat.

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

NuiDateRange

Ein Zeitraum aus ganzen Tagen.

NuiDateRange: Eigenschaften
NameTypStandardwertBeschreibung
start, endEigenschaftNuiDateDer erste und der letzte Tag, beide eingeschlossen.