Calendar

import { Calendar } from "@/components/ui/calendar"
 
export function CalendarDemo() {
	return <Calendar showOutsideDays />
}

"use client"
 
import { useState } from "react"
 
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarSingleDemo() {
	const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
 
	return (
		<Calendar
			mode="single"
			selected={selectedDate}
			onSelect={setSelectedDate}
			showOutsideDays
		/>
	)
}

"use client"
 
import { useState } from "react"
 
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarMultipleDemo() {
	const [selectedDates, setSelectedDates] = useState<Date[] | undefined>(
		undefined
	)
 
	return (
		<Calendar
			mode="multiple"
			selected={selectedDates}
			onSelect={setSelectedDates}
			showOutsideDays
		/>
	)
}

"use client"
 
import { useState } from "react"
import { DateRange } from "react-day-picker"
 
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarRangeDemo() {
	const [range, setRange] = useState<DateRange | undefined>(undefined)
 
	return (
		<Calendar
			mode="range"
			selected={range}
			onSelect={setRange}
			showOutsideDays
		/>
	)
}

"use client"
 
import { useState } from "react"
 
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarDisabledDemo() {
	const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
 
	return (
		<Calendar
			mode="single"
			disabled={(date) => date < new Date()}
			selected={selectedDate}
			onSelect={setSelectedDate}
		/>
	)
}