Calendar
A flexible calendar component supporting single date, multiple dates, and date range selection. Features include month navigation, disabled dates, min/max date constraints, and optional time picker integration.
Installation
Import
Usage
The Calendar component is ideal for date selection in forms, booking systems, scheduling interfaces, and any application requiring date input. Use single mode for simple date selection, multiple mode for selecting several dates, and range mode for date ranges. The component supports keyboard navigation, accessibility features, and can be customized with date constraints, disabled dates, and multiple month displays.
Design Guidelines
The calendar uses a clean, grid-based layout with clear visual hierarchy. Selected dates are highlighted, and hover states provide feedback. The component is responsive and adapts to different screen sizes. When using multiple months, ensure adequate horizontal space. The time picker integration is best suited for single date selection mode.
Basic Usage
Simple calendar with single date selection
Date Range Selection
Select a range of dates
Multiple Date Selection
Select multiple individual dates
With Date Constraints
Calendar with minimum and maximum date restrictions
With Today Button
Calendar with a button to quickly jump to today
With Time Picker
Calendar with integrated time selection
Multiple Months
Display multiple months side by side
Custom Week Start
Calendar starting on Monday instead of Sunday
Hide Outside Days
Hide days from previous and next months
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | The selected date(s) or date range |
onValueChange | (value: Date | Date[] | { from: Date; to?: Date } | undefined) => void | - | Callback fired when the selected date(s) change |
defaultValue | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | The default selected date(s) or date range |
mode | "single" | "multiple" | "range" | "single" | Selection mode: single date, multiple dates, or date range |
numberOfMonths | number | 1 | Number of months to display side by side |
showOutsideDays | boolean | true | Whether to show days from previous and next months |
showTodayButton | boolean | false | Whether to show a button to jump to today |
showTimePicker | boolean | false | Whether to show an integrated time picker |
disabled | Date[] | ((date: Date) => boolean) | boolean | false | Dates to disable or a function to determine if a date should be disabled |
minDate | Date | undefined | undefined | Minimum selectable date |
maxDate | Date | undefined | undefined | Maximum selectable date |
locale | string | "en-US" | Locale for date formatting and display |
weekStartsOn | 0 | 1 | 0 | Day of the week to start the calendar (0 = Sunday, 1 = Monday) |
className | string | — | Additional CSS classes to apply to the component |