Calendar

Встроенная сетка месяца: дата или диапазон, несколько месяцев, недоступные дни, своё содержимое дня. Бесплатно, MIT · Формы и ввод › Дата и время

Установка

npx valyro-cli@latest add calendar

npx shadcn@latest add https://valyro.xyz/r/calendar.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Calendar } from 'valyro-ui';

Пропсы

Prop	Type
`mode`	`'single' \| 'range'`	`single`: one date (default). `range`: a start and an end, with a live preview of the band.
`value`	`Date \| null \| DateRange`	Controlled `value`; use with `onValueChange`.
`defaultValue`	`Date \| null \| DateRange`	Initial `value` when uncontrolled.
`onValueChange`	`(value: Date \| null) => void \| (value: DateRange) => void`	Called with the new `value` when it changes.
`locale`	`string`	BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`
`minDate`	`Date`
`maxDate`	`Date`
`isDateDisabled`	`(date: Date) => boolean`
`month`	`Date`	First visible month (controlled).
`defaultMonth`	`Date`	Initial `month` when uncontrolled.
`onMonthChange`	`(month: Date) => void`	Called with the new `month` when it changes.
`numberOfMonths`	`number`	Months shown side by side.
`autoFocus`	`boolean`	Focus the active day on mount — used when the calendar opens in a popover.
`labels`	`Partial<CalendarLabels>`	Accessible names of the month buttons.
`children`	`ReactNode`	The parts of each month, in your order and with your content between them: `Calendar.Header` (with `Calendar.Previous`, `Calendar.Caption`, `Calendar.Next`) and `Calendar.Grid`. Default: a header and a grid.

Составные части

Calendar.Header (CalendarHeader), Calendar.Previous (CalendarPrevious), Calendar.Caption (CalendarCaption), Calendar.Next (CalendarNext), Calendar.Grid (CalendarGrid)

Calendar

Установка

Пропсы

Составные части

Похожие компоненты