Calendar

An inline month grid: one date or a range, several months, unavailable days, your own day content. Free, MIT · Forms and input › Date and time

Installation

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';

Props

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.

Compound parts

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

Related components

Date Picker — Date selection
Date Range Picker — Date range selection
Date Field — Date typed segment by segment in the locale order
Time Picker — Time selection
Time Field — Time typed segment by segment, 24-hour or AM/PM
Wheel Picker — iOS-style picker wheel: momentum, 3D cylinder, date and time presets
Date Of Birth Input — Date of birth as three selects in locale order
Text Input — Text fields
Input Group — A field joined with text, buttons and selects in one frame
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions

Previous: Masked Input · Next: Date Picker · All Forms and input