Calendar
Provides a visual interface for date selection.
September 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
calendar-demo.tsx
import { Calendar } from "@/components/ui/calendar"
export function CalendarDemo() {
return <Calendar showOutsideDays />
}
Installation
npx shadcn@latest add @9ui/calendar
Usage
Imports
import { Calendar } from "@/components/ui/calendar"
Anatomy
<Calendar />
Examples
Single Date
September 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
calendar-single.tsx
"use client"
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"
export function CalendarSingle() {
const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
return (
<Calendar
mode="single"
selected={selectedDate}
onSelect={setSelectedDate}
showOutsideDays
/>
)
}
Multiple Dates
September 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
calendar-multiple.tsx
"use client"
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"
export function CalendarMultiple() {
const [selectedDates, setSelectedDates] = useState<Date[] | undefined>(
undefined
)
return (
<Calendar
mode="multiple"
selected={selectedDates}
onSelect={setSelectedDates}
showOutsideDays
/>
)
}
Date Range
September 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
calendar-range.tsx
"use client"
import { useState } from "react"
import { DateRange } from "react-day-picker"
import { Calendar } from "@/components/ui/calendar"
export function CalendarRange() {
const [range, setRange] = useState<DateRange | undefined>(undefined)
return (
<Calendar
mode="range"
selected={range}
onSelect={setRange}
showOutsideDays
/>
)
}
Disabled
September 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
calendar-disabled.tsx
"use client"
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"
export function CalendarDisabled() {
const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
return (
<Calendar
mode="single"
disabled={(date) => date < new Date()}
selected={selectedDate}
onSelect={setSelectedDate}
/>
)
}