Calendar

A fully featured date picker with keyboard navigation, accessibility support, and customizable styling.

Installation

Install the Calendar component using the nocta-ui CLI:

npx nocta-ui add calendar

Then import the component:

import { Calendar } from '@/components/ui/calendar';

A simple calendar with date selection functionality.

Customize the first day of the week and show week numbers.

Display week numbers alongside the calendar.

Restrict date selection with various disability patterns.

Set minimum and maximum selectable dates.

Customize how months and weekdays are displayed.

Disable the entire calendar.

Handle date selection with custom logic.

Prop	Type	Default	Description
`value`	`Date \| undefined`	-	The selected date (controlled)
`defaultValue`	`Date \| undefined`	-	The default selected date (uncontrolled)
`onChange`	`(date: Date \| undefined) => void`	-	Callback when date is selected
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the calendar
`disabled`	`boolean`	`false`	Whether the calendar is disabled
`disabledDates`	`Date[] \| ((date: Date) => boolean)`	-	Dates to disable
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`showWeekNumbers`	`boolean`	`false`	Whether to show week numbers
`showOutsideDays`	`boolean`	`true`	Whether to show days from other months
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of week (0 = Sunday)
`formatMonth`	`(date: Date) => string`	-	Custom month formatting function
`formatWeekday`	`(date: Date) => string`	-	Custom weekday formatting function
`className`	`string`	-	Additional CSS classes
`aria-label`	`string`	`'Calendar'`	Accessibility label

The Calendar component also accepts all standard HTML div attributes.