Calendar picker
A six-week calendar for choosing one date, with bounded month browsing and unavailable days.
Schedule a review
Choose a weekday for the next component review.
October 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Review date: 22 October 2026
Weekends and 21 October are unavailable. Select a chosen date again to clear it.
Implementation
1"use client";2 3import {4 useId,5 useLayoutEffect,6 useRef,7 useState,8 type HTMLAttributes,9 type KeyboardEvent,10} from "react";11import { ChevronLeft, ChevronRight } from "lucide-react";12 13/** A Gregorian civil date, YYYY-MM-DD. It does not represent a time or timezone. */14export type CalendarDate = string;15 16export type CalendarPickerProps = Omit<17 HTMLAttributes<HTMLDivElement>,18 "children" | "defaultValue" | "onChange"19> & {20 value?: CalendarDate | null;21 defaultValue?: CalendarDate | null;22 onValueChange?: (value: CalendarDate | null) => void;23 /** Controlled or initial visible month, YYYY-MM. */24 month?: string;25 defaultMonth?: string;26 onMonthChange?: (month: string) => void;27 minDate?: CalendarDate;28 maxDate?: CalendarDate;