Calendar
Date picker calendar built on react-day-picker v9. Supports single, range, and multiple selection modes, RTL, week numbers, disabled dates, multi-month view, and an optional footer slot.
Playground
Installation
pnpm add @tessinaui/ui react-day-pickerUsage
import { Calendar } from "@tessinaui/ui";{/* Single date */}
<Calendar mode="single" selected={date} onSelect={setDate} />
{/* Date range */}
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
{/* Multiple dates */}
<Calendar mode="multiple" selected={dates} onSelect={setDates} />Examples
Default
A single-date picker — the simplest real usage.
Range
Select a start and end date across two months with mode="range".
Multiple
Pick several independent dates with mode="multiple".
Sizes
Three day-cell densities — sm, md, and lg.
Disabled dates
Block specific days from selection — here weekends are disabled.
Loading
Use CalendarSkeleton as a placeholder while date data loads.
API Reference
Calendar props
All props from react-day-picker's DayPicker are accepted in addition to the props below.
Style
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Day cell size. sm=32px, md=36px, lg=40px. Caption and weekday text scales accordingly. |
width | "narrow" | "default" | "wide" | "default" | Container padding. narrow=p-2, default=p-3, wide=p-5. |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "md" | Border radius of the outer container. |
className | string | — | Added to the outer container <div> |
Selection
| Prop | Type | Description |
|---|---|---|
mode | "single" | "range" | "multiple" | Selection behaviour |
selected | Date | DateRange | Date[] | Controlled selected value |
onSelect | function | Called when selection changes |
defaultMonth | Date | Month shown on first render |
Layout
| Prop | Type | Default | Description |
|---|---|---|---|
numberOfMonths | number | 1 | Number of months displayed side-by-side |
showOutsideDays | boolean | true | Show days from adjacent months |
fixedWeeks | boolean | false | Always render 6 weeks so height stays constant |
showWeekNumber | boolean | false | Show ISO week number column |
Constraints
| Prop | Type | Description |
|---|---|---|
fromDate | Date | Earliest selectable date |
toDate | Date | Latest selectable date |
disabled | Matcher | Matcher[] | Disable specific dates or ranges (e.g., (d) => d.getDay() === 0) |
disableNavigation | boolean | Lock the month/year so the user cannot navigate |
Direction
| Prop | Type | Default | Description |
|---|---|---|---|
dir | "ltr" | "rtl" | "ltr" | Text direction. RTL flips nav arrows and calendar layout automatically. |
Date & Time Panel
| Prop | Type | Default | Description |
|---|---|---|---|
showDateTime | boolean | false | Show built-in Start/End date & time inputs with Apply button |
dateTimeLayout | "vertical" | "horizontal" | "vertical" | vertical renders the panel below the calendar; horizontal renders it to the side |
showTime | boolean | true | Show time inputs alongside the date inputs |
showTimezone | boolean | false | Show local timezone label below Apply button |
onApply | (data: CalendarApplyData) => void | — | Fired when Apply is clicked |
Footer
| Prop | Type | Description |
|---|---|---|
footer | ReactNode | Rendered below the calendar grid — useful for preset date buttons |
CalendarApplyData type
import type { CalendarApplyData } from "@tessinaui/ui";
interface CalendarApplyData {
start?: Date;
startTime?: string; // "HH:MM"
end?: Date;
endTime?: string; // "HH:MM"
}DateRange type
import type { DateRange } from "@tessinaui/ui";
interface DateRange {
from: Date | undefined;
to?: Date | undefined;
}ButtonGroup
A group of pill buttons inside a rounded pill container, supporting horizontal and vertical orientations with configurable gap
Card
A flexible surface container for grouping related content. Four variants (elevated/outlined/filled/ghost), five intents, six rounded options, five sizes, horizontal layout, interactive states, and LTR/RTL support.