Needless UI

Componenti

Calendario

Scegli un giorno, un intervallo o più giorni, anche da tastiera.

Import

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

NuiCalendar

Un calendario per scegliere giorni.

Selettore
nui-calendar
NomeTipoPredefinitoDescrizione
selectionInput'single' | 'range' | 'multiple''single'Quanti giorni si possono scegliere.
valueBidirezionaleNuiDate | nullnullIl giorno scelto.
valuesBidirezionaleNuiDate[][]I giorni scelti, in ordine.
rangeBidirezionaleNuiDateRange | nullnullL’intervallo scelto, estremi inclusi.
monthBidirezionaleNuiMonth | nullnullIl mese mostrato, il primo quando ce ne sono diversi.
viewBidirezionale'day' | 'month' | 'year''day'Giorni, mesi o anni.
min, maxInputNuiDate | nullIl primo e l’ultimo giorno che si possono scegliere.
unavailableInput(date: NuiDate) => booleanEsclude altri giorni, come le festività.
monthsInputnumber1Mesi affiancati.
weekNumbersInputbooleanfalseMostra i numeri di settimana ISO.
firstDayInput1 … 7Il primo giorno della settimana, 1 per lunedì. Di default, quello del locale.
localeInputstringLOCALE_IDFormatta nomi e cifre, e sceglie il primo giorno della settimana.
labelsInputPartial<NuiCalendarLabels>Ogni testo che il calendario mostra o annuncia, da tradurre.
cornersInputNuiCornersLa forma degli angoli: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusQuanto sono grandi gli angoli: none, small, medium, large o full.
densityInputNuiDensityQuanto spazio occupa: compact, regular o roomy.
pickedOutputNuiDate | NuiDateRangeEmette ogni scelta: un giorno, o un intervallo quando è completo.
focusDateMetodo(date?: NuiDate) => voidSposta il focus da tastiera su un giorno e ne mostra il mese.

Gli input di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiDateRange

Un intervallo di giorni.

NomeTipoPredefinitoDescrizione
start, endProprietàNuiDateIl primo e l’ultimo giorno, entrambi inclusi.