build69
build69  /  Components  /  Date & Time  /  Calendar

Calendar

v1.0.14Updated 19 Oct 2026

Date picker grid powered by react-day-picker. Used inside a Popover as a DatePicker; range selection supported.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendeddatepickerdatepickerrange+1

The default, out-of-the-box Calendar.

Recommended for+14
  • ✓Date input
  • ✓Date range filters
  • ✓Booking flows
Tags+6
datepickerdatepickerrangedefault
Features+4
  • Single / range / multiple selection
  • Locale-aware month grid
  • Keyboard navigation
Not recommended for−2
  • ✕Full-month event view (use BuildCalendar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Calendar" })

Usage

import { Calendar } from '@/components/inputs/calendar';

<Calendar mode="single" selected={date} onSelect={setDate} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
mode

Selection mode

'single' | 'range' | 'multiple'—
selected

Current selection

Date | Date[] | DateRange—
onSelect

Selection callback

function—

Related

Platform docsAll componentsSource files