Calendar
Calendar is a compound component that provides calendar functionality.
Active
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Examples
mode
Different mode options for the Calendar component.
single
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
multiple
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
range
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
npm install @your-design-system/calendar"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
export function CalendarDemo() {
const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border"
/>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode | enum | single | The mode prop for the component. Options: single | multiple | range |
selected | string | - | The selected prop for the component. |
onSelect | string | - | The onSelect prop for the component. |
disabled | boolean | false | Whether the component is disabled. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
p-3rounded-mdbordermode Variants
single
multiple
range
Design System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: p-3. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page