Needless UI

Componentes

Calendario

Elige un día, un rango o varios días, también con el teclado.

Importación

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

NuiCalendar

Un calendario para elegir días.

Selector
nui-calendar
NombreTipoPredeterminadoDescripción
selectionInput'single' | 'range' | 'multiple''single'Cuántos días se pueden elegir.
valueBidireccionalNuiDate | nullnullEl día elegido.
valuesBidireccionalNuiDate[][]Los días elegidos, en orden.
rangeBidireccionalNuiDateRange | nullnullEl rango elegido, con ambos extremos incluidos.
monthBidireccionalNuiMonth | nullnullEl mes que se muestra; si hay varios, el primero.
viewBidireccional'day' | 'month' | 'year''day'Días, meses o años.
min, maxInputNuiDate | nullEl primer y el último día que se pueden elegir.
unavailableInput(date: NuiDate) => booleanDescarta otros días, como los festivos.
monthsInputnumber1Meses lado a lado.
weekNumbersInputbooleanfalseMuestra los números de semana ISO.
firstDayInput1 … 7El primer día de la semana, 1 para el lunes. Por defecto, el de la configuración regional.
localeInputstringLOCALE_IDDa formato a los nombres y los dígitos, y elige el primer día de la semana.
labelsInputPartial<NuiCalendarLabels>Todos los textos que el calendario muestra o anuncia, para traducirlos.
cornersInputNuiCornersLa forma de sus esquinas: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusEl tamaño de sus esquinas: none, small, medium, large o full.
densityInputNuiDensityCuánto espacio ocupa: compact, regular o roomy.
pickedOutputNuiDate | NuiDateRangeEmite cada elección: un día, o un rango cuando está completo.
focusDateMétodo(date?: NuiDate) => voidLleva el foco del teclado a un día y muestra su mes.

Los inputs de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiDateRange

Un rango de días.

NombreTipoPredeterminadoDescripción
start, endPropiedadNuiDateEl primer y el último día, ambos incluidos.