Binhlaig UI Component
Calendar
A flexible date picker for single dates, ranges, multiple selections and custom rules.
Installation
Initialize Binhlaig UI once, then install Calendar with the saved installer.
Initialize first
npx binhlaig-ui@latest initTerminal
npx binhlaig-ui@latest add calendarImport
Import Calendar from your UI directory.
import { Calendar } from "@/components/ui/calendar"Single Date
Select one date with controlled React state.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date Range
Select a start and end date across one or more months.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
September 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Multiple Dates
Allow users to select several independent dates.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Month and Year Dropdown
Use dropdown captions for quickly navigating across years.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Disabled Dates
Disable dates using matchers such as ranges and weekdays.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Update or Overwrite
Replace an older Calendar source with the latest registry version.
npx binhlaig-ui@latest add calendar --overwriteAPI Reference
Calendar accepts React DayPicker props.
| Prop | Purpose |
|---|---|
mode | single, multiple or range selection. |
selected | Current selected date value. |
onSelect | Selection change callback. |
disabled | Dates that cannot be selected. |
numberOfMonths | Number of visible months. |
captionLayout | Label or dropdown navigation. |
showOutsideDays | Show dates outside the current month. |