Components
Calendar
A month-grid date picker for single, multiple, or range selection.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Usage
With @flagon-io/ui installed (see Installation), import it directly.
import { Calendar } from "@flagon-io/ui";
import { useState } from "react";
const [date, setDate] = useState<Date>();
<Calendar mode="single" selected={date} onSelect={setDate} />Examples
Bounds and disabled days
Pass any react-day-picker matcher to `disabled`: a { before } / { after } range, specific dates, or { dayOfWeek } for weekends. Here past dates and weekends are blocked.
September 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Prefer to own the code?
You don’t have to install the package - you can copy this component into your project with the shadcn CLI and edit it freely.
npx shadcn@latest add https://ui.flagon.io/r/calendar.json