Calendar

A date field that allows users to enter and edit dates. Built on react-day-picker v8.

Single date

import { Calendar } from "@tidal-ds/react";

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

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

Date range

import { Calendar } from "@tidal-ds/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