Calendar
Provides a visual interface for date selection.
April 2025
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
30 | 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 |
calendar-demo.tsx
import { Calendar } from "@/components/ui/calendar"
export function CalendarDemo() {
return <Calendar showOutsideDays />
}
Installation
npx shadcn@latest add https://9ui.dev/r/calendar.json
Usage
Imports
import { Calendar } from "@/components/ui/calendar"
Anatomy
<Calendar />
Examples
Single Date
April 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
April 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
April 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
April 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}
/>
)
}