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.
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} />Playground
Preview
Loading...
Showcase
Preview
Loading...
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;
}Date Picker
A button-triggered date picker popover built on Calendar and Base UI Popover. Supports single, range, and multiple selection, preset shortcuts, stacked or sidebar preset layouts, footer slot, and min/max constraints.
Alert
Contextual feedback messages for user actions or system events. Four visual variants (solid, soft, outline, ghost), five intents, three sizes, six rounded options, optional close button, actions, and RTL support.