Import

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

NuiCalendar

Un calendrier pour choisir des jours.

Sélecteur
nui-calendar
NuiCalendar: Propriétés
NomTypePar défautDescription
selectionInput'single' | 'range' | 'multiple''single'Le nombre de jours qui peuvent être choisis.
valueBidirectionnelNuiDate | nullnullLe jour choisi.
valuesBidirectionnelNuiDate[][]Les jours choisis, dans l’ordre.
rangeBidirectionnelNuiDateRange | nullnullLa plage choisie, bornes incluses.
monthBidirectionnelNuiMonth | nullnullLe mois affiché, le premier s’il y en a plusieurs.
viewBidirectionnel'day' | 'month' | 'year''day'Jours, mois ou années.
min, maxInputNuiDate | nullLe premier et le dernier jour qui peuvent être choisis.
unavailableInput(date: NuiDate) => booleanExclut d’autres jours, comme les jours fériés.
monthsInputnumber1Mois côte à côte.
weekNumbersInputbooleanfalseAffiche les numéros de semaine ISO.
firstDayInput1 … 7Le premier jour de la semaine, 1 pour lundi. Par défaut, celui des paramètres régionaux.
localeInputstringLOCALE_IDFormate les noms et les chiffres, et choisit le premier jour de la semaine.
labelsInputPartial<NuiCalendarLabels>Tous les textes que le calendrier affiche ou annonce, à traduire.
cornersInputNuiCornersLa forme de ses coins : round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusLa taille de ses coins : none, small, medium, large ou full.
densityInputNuiDensityLa place qu’il occupe : compact, regular ou roomy.
pickedOutputNuiDate | NuiDateRangeÉmet chaque choix : un jour, ou une plage une fois complète.
focusDateMéthode(date?: NuiDate) => voidPlace le focus clavier sur un jour et affiche son mois.

Les inputs de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

NuiDateRange

Une plage de jours.

NuiDateRange: Propriétés
NomTypePar défautDescription
start, endPropriétéNuiDateLe premier et le dernier jour, tous deux inclus.