Import
import { NuiCalendar, type NuiDateRange } from '@needless-ui/angular/calendar';NuiCalendar
A calendar for choosing days.
| Name | Type | Default | Description |
|---|---|---|---|
selectionInput | 'single' | 'range' | 'multiple' | 'single' | How many days can be chosen. |
valueTwo-way | NuiDate | null | null | The chosen day. |
valuesTwo-way | NuiDate[] | [] | The chosen days, in order. |
rangeTwo-way | NuiDateRange | null | null | The chosen range, both ends included. |
monthTwo-way | NuiMonth | null | null | The month shown, the first when several are. |
viewTwo-way | 'day' | 'month' | 'year' | 'day' | Days, months or years. |
min, maxInput | NuiDate | null | The first and last days that can be chosen. | |
unavailableInput | (date: NuiDate) => boolean | Rules out other days, such as holidays. | |
monthsInput | number | 1 | Months side by side. |
weekNumbersInput | boolean | false | Shows ISO week numbers. |
firstDayInput | 1 … 7 | The first day of the week, 1 for Monday. By default, the locale’s. | |
localeInput | string | LOCALE_ID | Formats names and digits, and picks the first day of the week. |
labelsInput | Partial<NuiCalendarLabels> | Every text the calendar shows or announces, to translate. | |
cornersInput | NuiCorners | The shape of its corners: round, squircle, bevel, scoop, notch or square. | |
radiusInput | NuiRadius | How big its corners are: none, small, medium, large or full. | |
densityInput | NuiDensity | How much room it takes: compact, regular or roomy. | |
pickedOutput | NuiDate | NuiDateRange | Emits each choice: a day, or a range once complete. | |
focusDateMethod | (date?: NuiDate) => void | Moves the keyboard to a day, showing its month. |
Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.
NuiDateRange
A range of days.
| Name | Type | Default | Description |
|---|---|---|---|
start, endProperty | NuiDate | The first and last days, both included. |