Calendar

Date picker powered by react-day-picker with single date, range selection, week numbers, and month/year dropdown.

Preview

March 2026

Installation

npx drivn add calendar

Usage

Import Calendar and manage selection with useState.

1 import { useState } from "react"
2 import { Calendar } from "@/components/ui/calendar"
3 
4 export default function Page() {
5   const [date, setDate] = useState<Date | undefined>()
6 
7   return (
8     <Calendar
9       selected={date}
10       onSelect={setDate}
11     />
12   )
13 }

Week Numbers

Display ISO week numbers alongside each row.

March 2026

	Su	Mo	Tu	We	Th	Fr	Sa
10
11
12
13
14

Month / Year Dropdown

Quick navigation with month and year dropdowns.

March 2026

Locale

Pass a locale object from react-day-picker/locale to localize month names, weekday labels, and first day of week.

březen 2026

po	út	st	čt	pá	so	ne

Range Selection

Select a date range with Calendar.Range.

March 2026

API Reference

Calendar

Prop	Type	Default	Description
`variant`	"default" \| "weekNumbers" \| "dropdown"	"default"	Visual variant controlling layout and navigation style
`selected`	Date \| undefined	—	The currently selected date
`onSelect`	(date: Date \| undefined) => void	—	Callback when a date is selected
`defaultMonth`	Date	—	The month to display on initial render
`fromYear`	number	currentYear - 20	First year shown in the dropdown variant
`toYear`	number	currentYear + 20	Last year shown in the dropdown variant
`disabled`	Matcher \| Matcher[]	—	Dates or date ranges to disable
`locale`	Partial<Locale>	—	Locale object from react-day-picker/locale for localization
`className`	string	—	Additional CSS classes for the root element

Calendar.Range

Prop	Type	Default	Description
`selected`	DateRange \| undefined	—	The currently selected date range ({ from, to })
`onSelect`	(range: DateRange \| undefined) => void	—	Callback when a date range is selected
`min`	number	—	Minimum number of days in the range
`max`	number	—	Maximum number of days in the range
`locale`	Partial<Locale>	—	Locale object from react-day-picker/locale for localization
`className`	string	—	Additional CSS classes for the root element

1	import { useState } from "react"
2	import { Calendar } from "@/components/ui/calendar"
3
4	export default function Page() {
5	const [date, setDate] = useState<Date \| undefined>()
6
7	return (
8	<Calendar
9	selected={date}
10	onSelect={setDate}
11	/>
12	)
13	}