Calendar

Import

import { Calendar } from "@retents/ui/calendar"

Usage Guidelines

When to use

• For selecting a single date or date range, such as booking dates, event scheduling, or date-of-birth fields.
• When users benefit from a visual calendar view rather than typing a date string.

When NOT to use

• For selecting date + time — combine Calendar with a time picker or use a full datetime component.
• For date range filters in dense UIs — consider a date range input with a Popover-triggered calendar.
• For selecting a year or month only — a Select is simpler.

Preview

Usage

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

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Peer dependencies

This component requires: react-day-picker, date-fns

Source