A DayPicker 10 calendar using Minecraft controls.
Preview
Usage
Use a discriminated DayPicker mode with its corresponding selected/onSelect shape. The example controls a single Date and freezes the initial displayed month to October 2026. Range mode accepts DateRange rather than a Date.
Composition
Calendar defaults to scale 2, showOutsideDays=true and captionLayout label. For a month/year picker use captionLayout dropdown with startMonth and endMonth. CalendarDayButton supplies original logical 20 by 20 day buttons; components and classNames can be merged through DayPicker props.
Interaction and limits
Only buttonVariant default is supported. Date selection and formatting belong to react-day-picker 10 and date-fns 4. The month grid and dropdown arrangement are web compositions; recorded native coverage applies to day buttons, labels, card surfaces and navigation arrows.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { DayPicker, getDefaultClassNames } from "react-day-picker";
import type {
DayButton,
Root,
Weekday,
CaptionLabel,
WeekNumber,
Dropdown,
} from "react-day-picker";