ui
XGitHub

Calendar

Provides a visual interface for date selection.

Docs
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

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

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

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

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}
		/>
	)
}