Calendar
A flexible calendar component for date selection with single, multiple, and range modes
Overview
The Calendar component provides a visual interface for date selection. Built on react-day-picker, it supports single date selection, date ranges, multiple dates, and includes features like month/year dropdowns and keyboard navigation.
Import
import { Calendar } from "@px-ui/core";Usage
const [selected, setSelected] = useState<Date | undefined>(new Date());
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
/>Examples
Range Selection
Allow users to select a date range with visual highlighting between start and end dates.
const [selected, setSelected] = useState<DateRange | undefined>({
from: new Date(),
to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
});
<Calendar
mode="range"
selected={selected}
onSelect={setSelected}
/>Multiple Selection
Enable selection of multiple individual dates.
const [selected, setSelected] = useState<Date[] | undefined>([
new Date(),
new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
]);
<Calendar
mode="multiple"
selected={selected}
onSelect={setSelected}
/>With Dropdowns
Use dropdown menus for month and year selection to quickly navigate to distant dates.
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
captionLayout="dropdown"
fromYear={2020}
toYear={2030}
/>API Reference
Calendar
The main calendar component for date selection.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection mode for the calendar |
selected | Date | Date[] | DateRange | - | Currently selected date(s) |
onSelect | function | - | Callback when date selection changes |
disabled | Date | Date[] | function | - | Dates that cannot be selected |
showOutsideDays | boolean | true | Show days from adjacent months |
captionLayout | "label" | "dropdown" | "label" | Layout for month/year caption |
fromYear | number | - | Starting year for dropdown (when using dropdown layout) |
toYear | number | - | Ending year for dropdown (when using dropdown layout) |
showWeekNumber | boolean | false | Display week numbers |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from react-day-picker DayPicker
Common Patterns
Disabling Dates
Disable specific dates or date ranges:
// Disable past dates
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
disabled={{ before: new Date() }}
/>
// Disable specific dates
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
disabled={[new Date(2024, 0, 1), new Date(2024, 11, 25)]}
/>
// Disable with custom function
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
disabled={(date) => date.getDay() === 0 || date.getDay() === 6}
/>Default Month
Control which month is initially displayed:
<Calendar
mode="single"
selected={selected}
onSelect={setSelected}
defaultMonth={new Date(2024, 0)} // January 2024
/>Multiple Months
Display multiple months side by side:
<Calendar
mode="range"
selected={selected}
onSelect={setSelected}
numberOfMonths={2}
/>