Calendar

An inline month grid for picking dates. Use it when a date is the focus of the task — booking, scheduling, filtering by range — or when you want the picker always visible; for a compact single date inside a form row, pair it inside a Popover trigger instead. Built on react-day-picker v8. Pick a mode: single for one day, multiple for a set of days, range for a start/end span (set numberOfMonths={2} so both endpoints stay visible).

Single date

import { Calendar } from "@liquidai/react";

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

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

Date range

import { Calendar } from "@liquidai/react";
import type { DateRange } from "react-day-picker";

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

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

With disabled dates

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={{ before: new Date() }}
/>

Props

Calendar forwards every prop to DayPicker. Common props:

Prop	Type	Notes
mode	"single" \| "multiple" \| "range"	Selection mode.
selected	Date \| Date[] \| DateRange	Controlled selection.
onSelect	(value) => void	Change handler matching mode.
numberOfMonths	number	Render N months side-by-side (great for range).
defaultMonth	Date	Initial visible month.
disabled	Matcher \| Matcher[]	Disable specific days (before/after/days).
showOutsideDays	boolean	Default true — show trailing/leading days.

Source

packages/react/src/components/calendar.tsx · Figma node 2819:19887

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa