Cognition

Components

Calendar

An always-visible grid for picking dates inline. It supports single dates, ranges, and multiple selections, with disabled days and a today indicator.

Calendar is the primitive that Date Picker is built on. Date Picker wraps this same grid in a Popover behind a button; here the grid stands on its own, always visible.

Preview

June 2026

Rendered with live Cognition tokens. Pick a day, page months, no dark: classes.

Variants

June 2026
<Calendar mode="single" />
June 2026
<Calendar mode="range" />
June 2026
<Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />

Single date, a date range, and a calendar with weekends disabled. Multiple-date selection uses mode="multiple".

States

June 2026

Selected fills with the brand primary; today carries the accent tint.

June 2026

A range fills its span with the accent; disabled days dim and a day tints on hover.

Default, day hover, day selected, day in range, day disabled, and the today indicator are all visible in the live grids above.

API

Prop
Type
Default
Description
mode
"single" | "range" | "multiple"
"single"
What kind of selection the calendar allows.
selected
Date | DateRange | Date[]
undefined
The selected value. Its shape follows the mode.
onSelect
(value) => void
undefined
Called when the selection changes.
disabled
Matcher | Matcher[]
undefined
Days that cannot be selected, by date, range, or weekday.
numberOfMonths
number
1
How many months to render side by side.
autoFocus
boolean
false
Move focus into the grid on mount. Date Picker sets this when it opens.

Don't and Do

Don't

Don't drop a full inline Calendar into a tight space like a form row or a toolbar. The grid is large and pushes other content around. When room is limited, use a Date Picker, which keeps the same grid tucked inside a Popover.

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

Use it when picking a date is a primary action on the surface and the calendar should always be visible.

"use client";

import * as React from "react";
import { Calendar } from "@/components/ui/calendar";

export function BookingDate() {
  const [date, setDate] = React.useState<Date>();
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border border-border-default"
    />
  );
}