{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Keyboard-friendly month calendar with selection and date constraints.", "dependencies": [ "clsx", "tailwind-merge", "lucide-react" ], "devDependencies": [], "registryDependencies": [], "files": [ { "path": "components/ui/calendar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport type CalendarRangeValue = { from: Date; to?: Date }\n\nexport interface CalendarProps {\n value?: Date | CalendarRangeValue\n defaultValue?: Date | CalendarRangeValue\n onValueChange?: (date: Date | CalendarRangeValue | undefined) => void\n mode?: 'single' | 'range'\n month?: Date\n defaultMonth?: Date\n onMonthChange?: (month: Date) => void\n minDate?: Date\n maxDate?: Date\n disabled?: (date: Date) => boolean\n showOutsideDays?: boolean\n showMonthYearPicker?: boolean\n className?: string\n}\n\nconst weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']\nconst monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']\n\nconst startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate())\nconst isSameDay = (left?: Date, right?: Date) => Boolean(left && right && startOfDay(left).getTime() === startOfDay(right).getTime())\nconst isBefore = (date: Date, boundary?: Date) => Boolean(boundary && startOfDay(date) < startOfDay(boundary))\nconst isAfter = (date: Date, boundary?: Date) => Boolean(boundary && startOfDay(date) > startOfDay(boundary))\n\nconst isRangeValue = (value: unknown): value is CalendarRangeValue =>\n Boolean(value && typeof value === 'object' && 'from' in value)\n\nexport function Calendar({\n value: controlledValue,\n defaultValue,\n onValueChange,\n mode = 'single',\n month: controlledMonth,\n defaultMonth,\n onMonthChange,\n minDate,\n maxDate,\n disabled,\n showOutsideDays = true,\n showMonthYearPicker = true,\n className,\n}: CalendarProps) {\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n const [visibleMonth, setVisibleMonth] = React.useState(() => {\n const base = defaultMonth ?? (defaultValue && !isRangeValue(defaultValue) ? defaultValue : new Date())\n return new Date(base.getFullYear(), base.getMonth(), 1)\n })\n const [rangeSelecting, setRangeSelecting] = React.useState(false)\n const [showPicker, setShowPicker] = React.useState(false)\n\n const value = controlledValue ?? internalValue\n const month = controlledMonth ?? visibleMonth\n const firstDay = new Date(month.getFullYear(), month.getMonth(), 1)\n const firstGridDay = new Date(month.getFullYear(), month.getMonth(), 1 - firstDay.getDay())\n const days = Array.from({ length: 42 }, (_, index) => new Date(firstGridDay.getFullYear(), firstGridDay.getMonth(), firstGridDay.getDate() + index))\n\n const emit = (next: Date | CalendarRangeValue | undefined) => {\n setInternalValue(next)\n onValueChange?.(next)\n }\n\n const changeMonth = (offset: number) => {\n const nextMonth = new Date(month.getFullYear(), month.getMonth() + offset, 1)\n setVisibleMonth(nextMonth)\n onMonthChange?.(nextMonth)\n }\n\n const selectDate = (date: Date) => {\n if (mode === 'range') {\n const current = isRangeValue(value) ? value : undefined\n if (!current || (current.from && current.to) || rangeSelecting) {\n // Start a new range\n emit({ from: date })\n setRangeSelecting(true)\n } else {\n if (isBefore(date, current.from)) {\n emit({ from: date, to: current.from })\n } else {\n emit({ from: current.from, to: date })\n }\n setRangeSelecting(false)\n }\n return\n }\n\n const nextValue = isSameDay(date, value as Date) ? undefined : date\n emit(nextValue)\n }\n\n const isInRange = (date: Date): boolean => {\n if (mode !== 'range') return false\n const range = isRangeValue(value) ? value : undefined\n if (!range?.from || !range.to) return false\n return !isBefore(date, range.from) && !isAfter(date, range.to)\n }\n\n const pickMonth = (index: number) => {\n const next = new Date(month.getFullYear(), index, 1)\n setVisibleMonth(next)\n onMonthChange?.(next)\n setShowPicker(false)\n }\n\n const pickYear = (year: number) => {\n const next = new Date(year, month.getMonth(), 1)\n setVisibleMonth(next)\n onMonthChange?.(next)\n }\n\n const pickerYear = month.getFullYear()\n\n return (\n
\n
\n {showMonthYearPicker ? (\n
\n setShowPicker((s) => !s)}\n className=\"flex items-center gap-1.5 rounded-full bg-rk-canvas px-3 py-1.5 font-display text-lg font-black rk-border-sm rk-shadow-sm hover:bg-rk-primary focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 cursor-pointer\"\n >\n \n {month.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}\n \n \n \n\n {showPicker && (\n
\n
\n \n {pickerYear}\n \n
\n
\n {monthNames.map((name, index) => (\n pickMonth(index)}\n className={cn(\n 'rounded-xl px-2 py-1.5 text-xs font-extrabold transition-colors focus:outline-none focus:ring-2 focus:ring-black cursor-pointer',\n month.getMonth() === index ? 'bg-rk-primary rk-border-sm rk-shadow-xs' : 'hover:bg-rk-canvas'\n )}\n >\n {name.slice(0, 3)}\n \n ))}\n
\n
\n )}\n
\n ) : (\n

\n {month.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}\n

\n )}\n
\n \n \n
\n
\n
\n {weekdays.map((day) =>
{day}
)}\n {days.map((date) => {\n const outside = date.getMonth() !== month.getMonth()\n const unavailable = isBefore(date, minDate) || isAfter(date, maxDate) || disabled?.(date)\n const isDisabled = unavailable || (outside && !showOutsideDays)\n const range = isRangeValue(value) ? value : undefined\n const isRangeStart = range?.from ? isSameDay(date, range.from) : false\n const isRangeEnd = range?.to ? isSameDay(date, range.to) : false\n const inRange = isInRange(date)\n return (\n selectDate(date)}\n className={cn(\n 'aspect-square rounded-xl p-1 text-sm font-extrabold transition-colors focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:pointer-events-none disabled:opacity-25',\n outside ? 'text-rk-ink/30' : 'text-rk-ink hover:bg-rk-mint',\n inRange && 'bg-rk-mint rounded-none',\n isRangeStart && 'bg-rk-primary rk-border-sm rk-shadow-sm rounded-l-xl',\n isRangeEnd && 'bg-rk-primary rk-border-sm rk-shadow-sm rounded-r-xl',\n mode === 'single' && isSameDay(date, value as Date) && 'bg-rk-primary rk-border-sm rk-shadow-sm text-rk-ink'\n )}\n >\n {date.getDate()}\n \n )\n })}\n
\n
\n )\n}\n", "type": "registry:ui", "target": "components/ui/calendar.tsx" } ] }