Calendar

Advanced date selection calendar with month/year navigation, date ranges, and internationalization support.

Installation

npx shadcn@latest add @preskok/calendar

Usage

import { getLocalTimeZone, today } from "@internationalized/date"

import { Calendar } from "@/components/ui/preskok-ui/calendar"

export function CalendarDemo() {
  const [date, setDate] = useState(today(getLocalTimeZone()))

  return <Calendar value={date} onChange={setDate} aria-label="Select a date" />
}

Props

Prop	Type	Default	Description
`value`	`DateValue \| null`	-	Selected date value
`onChange`	`(date: DateValue \| null) => void`	-	Date change handler
`minValue`	`DateValue`	-	Minimum selectable date
`maxValue`	`DateValue`	-	Maximum selectable date
`isDisabled`	`boolean`	`false`	Disable the entire calendar
`isReadOnly`	`boolean`	`false`	Make calendar read-only
`isDateUnavailable`	`(date: DateValue) => boolean`	-	Function to disable specific dates
`errorMessage`	`string`	-	Error message to display
`className`	`string`	-	Additional CSS classes

Examples

Basic

Controlled

Controlled Month/Year

Disabled

Unavailable Dates

Min/Max Dates

Validation

Date Range

Multiple Months

Features

Single date selection - Select one date with clear focus and state handling
Month/year navigation - Dropdown selectors for quick navigation
Date validation - Min/max dates and custom unavailable dates
Internationalization - Full i18n support with locale-aware formatting
Keyboard navigation - Complete keyboard accessibility
Custom styling - Extensive customization options
Time zones - Proper time zone handling with @internationalized/date
Screen reader support - Comprehensive accessibility features

Accessibility

The Calendar component follows WAI-ARIA guidelines:

Proper grid structure with row/column headers
Keyboard navigation with arrow keys
Focus management and visual indicators
Screen reader announcements for date changes
Support for disabled and unavailable dates

Calendar

Advanced date selection calendar with month/year navigation, date ranges, and internationalization support.

Installation

npx shadcn@latest add @preskok/calendar

Usage

import { getLocalTimeZone, today } from "@internationalized/date"

import { Calendar } from "@/components/ui/preskok-ui/calendar"

export function CalendarDemo() {
  const [date, setDate] = useState(today(getLocalTimeZone()))

  return <Calendar value={date} onChange={setDate} aria-label="Select a date" />
}

Props

Prop	Type	Default	Description
`value`	`DateValue \| null`	-	Selected date value
`onChange`	`(date: DateValue \| null) => void`	-	Date change handler
`minValue`	`DateValue`	-	Minimum selectable date
`maxValue`	`DateValue`	-	Maximum selectable date
`isDisabled`	`boolean`	`false`	Disable the entire calendar
`isReadOnly`	`boolean`	`false`	Make calendar read-only
`isDateUnavailable`	`(date: DateValue) => boolean`	-	Function to disable specific dates
`errorMessage`	`string`	-	Error message to display
`className`	`string`	-	Additional CSS classes