JD
Calendar
An in-house calendar component with support for single dates, ranges, disabled states, and multi-month layouts.
Preview & Interactive Laboratory
Single Selection
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Selected Date
May 23, 2026
This calendar runs on the template's own selection engine, while preserving the same glassmorphism styling and multi-state behavior.
Range Selection
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
June 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Range Duration
7Days Selected
Advanced Constraints
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Disabled State Examples
- Weekends automatically disabled via
dayOfWeek - Custom dates (e.g., Holidays) can be passed individually
- Past dates can be disabled using
before: new Date()
Usage & Implementation
import { Calendar, type DateRange } from "@/components/ui/calendar"
// Single
<Calendar mode="single" selected={date} onSelect={setDate} />
// Range
const [range, setRange] = React.useState<DateRange | undefined>()
<Calendar mode="range" selected={range} onSelect={setRange} />React / Tailwind
Granular Customization
1
Container
The main calendar wrapper.
className={`className`}2
Day
Individual day button styling.
className={`classNames={{ day_button: '...' }}`}3
Selected
The active selection background.
className={`classNames={{ selected: '...' }}`}API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | 'single' | 'range' | 'multiple' | 'single' | The selection mode. |
| selected | Date | Date[] | DateRange | - | The current selection state. |
| onSelect | function | - | Selection change callback. |
| disabled | CalendarMatcher | CalendarMatcher[] | - | Specify dates that cannot be selected. |
| numberOfMonths | number | 1 | Render multiple months side by side. |