Components
Calendar
Calendar component.
Use Calendar to pick dates in single, multiple, or range modes.
September 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
import { Calendar, toast } from '@tile-ui/react';
export default function CalendarDemo() {
return (
<Calendar
mode="single"Registry install
pnpm dlx shadcn@latest add @tile-ui/calendarPackage usage
import { Calendar } from '@tile-ui/react';
<Calendar mode="single" onSelect={(date) => console.log(date)} />Highlights
- Single, multiple, and range
- Disabled matcher
- Outside days
Registry dependencies
| Item | Purpose |
|---|---|
calendar | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Calendar
| Prop | Type | Default |
|---|---|---|
mode | 'single' | 'multiple' | 'range' | 'single' |
selected | Date | Date[] | CalendarRange | undefined | — |
defaultSelected | Date | Date[] | CalendarRange | undefined | — |
defaultMonth | Date | — |
showOutsideDays | boolean | true |
disabled | (date: Date) => boolean | — |
onSelect | (selection: CalendarSelection) => void | — |