Needless UI

Componentes

Calendário

Escolha um dia, um intervalo ou vários dias, também pelo teclado.

Importação

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

NuiCalendar

Um calendário para escolher dias.

Seletor
nui-calendar
NomeTipoPadrãoDescrição
selectionInput'single' | 'range' | 'multiple''single'Quantos dias podem ser escolhidos.
valueBidirecionalNuiDate | nullnullO dia escolhido.
valuesBidirecionalNuiDate[][]Os dias escolhidos, em ordem.
rangeBidirecionalNuiDateRange | nullnullO intervalo escolhido, com as duas pontas incluídas.
monthBidirecionalNuiMonth | nullnullO mês exibido, o primeiro quando há vários.
viewBidirecional'day' | 'month' | 'year''day'Dias, meses ou anos.
min, maxInputNuiDate | nullO primeiro e o último dia que podem ser escolhidos.
unavailableInput(date: NuiDate) => booleanExclui outros dias, como feriados.
monthsInputnumber1Meses lado a lado.
weekNumbersInputbooleanfalseMostra os números de semana ISO.
firstDayInput1 … 7O primeiro dia da semana, 1 para segunda-feira. Por padrão, o da localidade.
localeInputstringLOCALE_IDFormata nomes e dígitos, e escolhe o primeiro dia da semana.
labelsInputPartial<NuiCalendarLabels>Todo texto que o calendário mostra ou anuncia, para traduzir.
cornersInputNuiCornersO formato dos cantos: round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusO tamanho dos cantos: none, small, medium, large ou full.
densityInputNuiDensityQuanto espaço ele ocupa: compact, regular ou roomy.
pickedOutputNuiDate | NuiDateRangeEmite cada escolha: um dia, ou um intervalo quando completo.
focusDateMétodo(date?: NuiDate) => voidMove o foco do teclado para um dia, mostrando o mês dele.

Os inputs de personalização que você não definir seguem o atributo data-nui-* mais próximo. Veja o guia de personalização.

NuiDateRange

Um intervalo de dias.

NomeTipoPadrãoDescrição
start, endPropriedadeNuiDateO primeiro e o último dia, ambos incluídos.