Calendar

A React component in Beamline's Form controls category.

Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that follows the pointer.

Use it for

• An always-visible month: schedules, availability, booking.
• Far dates: the month title jumps by year (defaultView="years" opens there).

Not for

• A date field in a form (date-picker).
• A reporting range with presets (date-range-picker).

Anatomy

• header (month title that opens the years, previous, next)
• weekday row
• day grid
• today dot
• range span
• year view (every year in reach, four across)
• month view (the twelve months of a year)

Variants

• mode: single, range
• months: 1, 2

States

• day: rest, hover, focused, selected, in range, today, closed
• view: days, years, months

Keyboard

• arrows by day and week
• Page Up / Down by month, Shift by year
• Home / End week ends
• Enter / Space picks
• Escape drops a half range
• Enter / Space on the month title opens the years; a year opens its months; a month returns to its days
• In the years and months: arrows move, Enter / Space picks, Escape returns to the days (it never closes the popover it sits in)
• Only day controls handle grid keys; month navigation keeps native button activation.

Motion

None for days (frequent use). In single mode the chosen day is one solid that travels to the next day picked, across weeks and months (ui/lib/contour.ts); the new day keeps the page's ink until the solid arrives. Days, years and months swap in place at the same width (the height follows the content, as months of five and six weeks already do): the new view fades up from 98% over --pui-duration-feedback; reduced motion swaps at once.

Props

Dependencies

lucide-react

Import

import { Calendar, DAY } from "@/components/calendar/calendar";

Get it

Calendar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

More in Form controls

• Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
• Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
• Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
• Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
• Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
• Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
• Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
• Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
• Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
• File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
• Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
• Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
• Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
• Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
• Label: The text label tied to a form control, with a required marker that screen readers announce.
• Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
• Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
• Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
• OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
• Password field: A password field with a reveal control, and a strength meter when a password is being created.
• Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
• Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
• Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
• Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
• Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
• Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
• Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
• Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
• Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
• Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
• Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
• Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
• Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
• Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
• Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.