Calendar
A full-featured calendar component with month navigation, date selection, min/max constraints, disabled dates, today highlighting, and 3 size variants. Built with Framer Motion for smooth interactions.
Live Preview
Interact with the calendar component. Click a date to select it and see the selected value update in real time.
Selected: None
1<AidashCalendar2selected={selected}3onSelect={setSelected}4month={month}5onMonthChange={setMonth}6/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the AidashCalendar component into your project.
import { AidashCalendar } from '@/components/aidash/calendar';Basic Usage
A simple calendar with date selection and month navigation.
const [selected, setSelected] = useState<Date | null>(null);
const [month, setMonth] = useState(new Date());
<AidashCalendar
selected={selected}
onSelect={setSelected}
month={month}
onMonthChange={setMonth}
/>Sizes
The calendar comes in three sizes: sm, md, and lg to fit different layouts.
size="sm"
size="md"
size="lg"
<AidashCalendar size="sm" ... />
<AidashCalendar size="md" ... />
<AidashCalendar size="lg" ... />Min / Max Date
Restrict selectable dates to a specific range. Dates outside the range are grayed out and unclickable.
Range: 7/28/2026 — 8/16/2026
<AidashCalendar
selected={selected}
onSelect={setSelected}
month={month}
onMonthChange={setMonth}
minDate={new Date(2026, 6, 4)}
maxDate={new Date(2026, 6, 23)}
/>Disabled Dates
Disable specific individual dates. Useful for blocking holidays, booked dates, or unavailable slots.
Disabled: 10th, 15th, 20th, 25th of this month
const disabledDates = [
new Date(2026, 6, 10),
new Date(2026, 6, 15),
new Date(2026, 6, 20),
new Date(2026, 6, 25),
];
<AidashCalendar
disabledDates={disabledDates}
...
/>Today Highlight
Today's date is automatically highlighted with a subtle brand accent, making it easy to identify the current day at a glance.
Today (8/2/2026) is highlighted automatically
Controlled Month
Use the month and onMonthChange props to control which month is displayed externally.
const [month, setMonth] = useState(new Date());
<button onClick={() => setMonth(new Date())}>Today</button>
<AidashCalendar
month={month}
onMonthChange={setMonth}
selected={selected}
onSelect={setSelected}
/>Props API
Complete list of props supported by the AidashCalendar component.
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | Date | null | null | The currently selected date |
| onSelect | (date: Date) => void | — | Callback when a date is clicked |
| month | Date | — | Controlled month to display (first day of month) |
| onMonthChange | (date: Date) => void | — | Callback when month navigation occurs |
| minDate | Date | — | Earliest selectable date |
| maxDate | Date | — | Latest selectable date |
| disabledDates | Date[] | [] | Array of specific dates to disable |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the calendar |
| className | string | '' | Additional CSS classes |
Accessibility
Built-in accessibility features for keyboard navigation and screen readers.
- Uses
role="grid"on the calendar container for proper ARIA grid semantics. - Each day cell uses
role="gridcell"witharia-selectedandaria-disabledattributes. - Navigation buttons include
aria-labelfor "Previous month" and "Next month". - Disabled dates have
disabledattribute set, preventing focus and interaction. - All interactive elements are native
<button>elements, ensuring keyboard focusability and Enter/Space activation. - Visual states (selected, today, disabled) use sufficient color contrast and do not rely solely on color to convey meaning.
Related
Components that work well alongside the Calendar.