Calendar

React Day Picker wired to the Omni button system: sharp navigation controls, muted grid, and range styling that stays readable in glassy surfaces.

Examples

Single date
Use the frosted navigation buttons and muted cells for point-in-time scheduling.
October 2025

Inspection scheduled for 10/27/2025.

Date range
Range selection with dropdown month controls for maintenance windows.
October 2025
November 2025
10/27/2025 – 10/31/2025

Installation

pnpm dlx shadcn@latest add @omni/calendar

Usage

import { Calendar } from "@/components/ui/calendar"
import type { DateRange } from "react-day-picker"

const [range, setRange] = useState<DateRange | undefined>()

<Calendar
  mode="range"
  numberOfMonths={2}
  captionLayout="dropdown"
  selected={range}
  onSelect={setRange}
/>