Calendar

Usage

The calendar is an inline variant of the DatePicker component. Set the inline prop on DatePicker.Root to render the calendar directly on the page without the input, positioner, and content parts.

import { DatePicker } from "@chakra-ui/react"

<DatePicker.Root inline>
  <DatePicker.View view="day">
    <DatePicker.Header />
    <DatePicker.DayTable />
  </DatePicker.View>
  <DatePicker.View view="month">
    <DatePicker.Header />
    <DatePicker.MonthTable />
  </DatePicker.View>
  <DatePicker.View view="year">
    <DatePicker.Header />
    <DatePicker.YearTable />
  </DatePicker.View>
</DatePicker.Root>

Examples

Sizes

Use the size prop to control the calendar cell and control sizes.

Hide Outside Days

Set the hideOutsideDays prop to hide dates that fall outside the current month.

Controlled

Use the value and onValueChange props to control the inline calendar.

Default Value

Use the defaultValue prop to set the initially selected date.

Range Selection

Set the selectionMode prop to "range" to allow selecting a date range.

Multi Selection

Set the selectionMode prop to "multiple" to allow selecting multiple dates.

Min and Max

Use the min and max props to restrict the selectable date range.

Unavailable Dates

Use the isDateUnavailable prop to disable specific dates based on custom logic.

Multiple Months

Use the numOfMonths prop to display multiple months side by side.

Locale

Use the locale prop to customize for different languages and regional formats.

Max Selected Dates

Use the maxSelectedDates prop with selectionMode="multiple" to limit the number of dates that can be selected.

Week Numbers

Use the showWeekNumbers prop to display ISO week numbers alongside the calendar rows.

Booking Time Grid

Here's an example of a Calendly-style booking interface with an inline calendar and a scrollable time slot grid.

Props

The Calendar shares the same props and anatomy as the DatePicker. Refer to the DatePicker docs for the full prop reference.