Home

Calendar

A month of days to pick one day, or a range of days, from, drawn in the page.

ui.calendarcomponents/ui/calendar.tsx

Use case

For the AI

Use it when the month itself belongs on the page: the side panel of a schedule, the day step of a booking, the vacation range of an employee. Days are round, today carries a dot and the picked day is in the primary colour. Standing alone it sits on a card; inside a form field it is the date picker.

Use it when

  • A month shown in the page (a schedule's side panel, a booking step)
  • A range of days: `mode="range"` (a vacation, a reporting period)
  • Days that cannot be picked: `disabled` (past days, weekends)
  • A date years away: `captionLayout="dropdown"` with `startMonth` and `endMonth`

Use something else when

  • A date in a form row or a filter, opened from a field: Date picker
  • Showing jobs or events on each day of a week (an agenda): this picks a date, it does not list events

Examples

October 2026

Code

Import

import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"

Usage

export function DeliveryDay() {
  const [date, setDate] = useState<Date | undefined>(new Date())
  return (
    <div className="rounded-[20px] bg-background p-3 shadow-(--shadow-rest)">
      <Calendar mode="single" selected={date} onSelect={setDate} disabled={{ before: new Date() }} />
    </div>
  )
}

Rules

  • Keep `selected` and `onSelect` in state; with `mode="single"` (the default) `onSelect` hands a `Date` or `undefined`.
  • Standing alone it sits on a card (`rounded-[20px] bg-background p-3 shadow-(--shadow-rest)`), as the showcase draws it.
  • Dates follow the interface's language: for a French tool pass `locale={frCA}` from `@daypicker/react/locale`.