Calendar

Controlled or uncontrolled single/range calendar with semantic today, selection and range states plus solid, soft and glass surfaces.

Import

import { Calendar } from "poyraz-ui/molecules";

Default

Interactive calendar with the current date selected. Click the month/year header to pick a different month or year.

const [date, setDate] = useState<Date | undefined>(new Date());

<Calendar selected={date} onSelect={setDate} />

Range + Glass

Range start, middle and end states use semantic selection roles.

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

<Calendar mode="range" selected={range} onSelect={setRange} surface="glass" radius="xl" />

pnpm dlx shadcn@latest add @poyraz/calendar

Runtime dependencies

lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/button

Installed files

@ui/molecules/calendar.tsx