Calendar

An inline date calendar component with month navigation. Click the month/year header to switch to month view, then year view. Supports single-date selection with custom styling.

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} />

No Default Selection

Calendar with no date pre-selected. Use the header to navigate months and years.

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

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