Calendar
Calendar provides a date picker component with month and year navigation for selecting dates.
Preview
Usage
tsx
import { Calendar } from "@e-infra/design-system";
<Calendar mode="single" selected={date} onSelect={setDate} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | single | range | multiple | single | Selection mode |
| selected | DayPicker selection value | - | Selected date(s) (controlled) |
| defaultMonth | Date | - | Month shown when the calendar opens |
| onSelect | DayPicker selection handler | - | Callback when the selected date changes |
| showOutsideDays | boolean | true | Show days from previous/next month |
| captionLayout | label | dropdown | label | Month/year selector type |
| buttonVariant | Button variant | ghost | Variant for navigation buttons |
| className | string | - | Additional CSS classes |
| classNames | object | - | Custom class names for elements |
| formatters | object | - | Custom date formatters |
| components | object | - | Custom component overrides |
Notes
Calendarforwards the rest of theDayPickerprops, so you can configure selection limits, disabled dates, and other behavior directly.- The
buttonVariantprop only changes the navigation buttons rendered by the wrapper, not the rest of theDayPickerUI.
Modes
| Mode | Description |
|---|---|
single | Select one date |
range | Select start and end date |
multiple | Select multiple dates |