Date & Time

Calendar

Date grid (react-day-picker).

Import

tsx

import { Calendar } from "@cronus-ui/ui";

bash

npx cronus-ui add calendar

Examples

Single date

A controlled calendar in single-select mode. Click a day to update the value.

June 2026

tsx

// Fixed initial date keeps SSR + client identical (avoids hydration drift).
const [date, setDate] = useState<Date | undefined>(() => new Date(2026, 5, 21));

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    defaultMonth={new Date(2026, 5, 1)}
    fixedWeeks
    className="rounded-md"
  />
);

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa