Calendar

A calendar component that allows users to select a date or a range of dates.

@@directive("'use client'")

@react.component

Blocks

We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.

See all calendar blocks in the Blocks Library page.

Installation

npx shadcn@latest add @rescript-shadcn/Calendar

Usage

let (date, setDate) = React.useState(() => Some(Date.make()))
 
<Calendar
  mode=Single
  selected=?date
  onSelect={value => setDate(_ => value)}
  className="rounded-lg border"
/>

See the React DayPicker documentation for more information.

About

The Calendar component is built on top of React DayPicker.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Persian / Hijri / Jalali Calendar

To use the Persian calendar, edit components/ui/Calendar.res and replace react-day-picker with react-day-picker/persian.

- @module("react-day-picker")
+ @module("react-day-picker/persian")
external make: Props.t<'selected> => React.element = "DayPicker"
@@directive("'use client'")
@@jsxConfig({version: 4, mode: "automatic", module_: "BaseUi.BaseUiJsxDOM"})

Selected Date (With TimeZone)

The Calendar component accepts a timeZone prop to ensure dates are displayed and selected in the user's local timezone.

module CalendarWithTimezone = {
  @react.component 
  let make = () => {
    let (date, setDate) = React.useState(() => None)
    let (timeZone, setTimeZone) = React.useState(() => None)
 
    React.useEffect(() => {
      setTimeZone((Intl.DateTimeFormat.make()->Intl.DateTimeFormat.resolvedOptions).timeZone)
      None
    }, [])
 
    <Calendar
      mode=Single
      selected=date
      onSelect={date => setDate(_ => date)}
      timeZone
    />
  }
}

Note: If you notice a selected date offset (for example, selecting the 20th highlights the 19th), make sure the timeZone prop is set to the user's local timezone.

Why client-side? The timezone is detected using Intl.DateTimeFormat().resolvedOptions().timeZone inside a useEffect to ensure compatibility with server-side rendering. Detecting the timezone during render would cause hydration mismatches, as the server and client may be in different timezones.

Examples

Basic

A basic calendar component. We used className="rounded-lg border" to style the calendar.

@@directive("'use client'")

@react.component

Range Calendar

Use the mode="range" prop to enable range selection.

@@directive("'use client'")

@react.component

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

@@directive("'use client'")

@react.component

Presets

@@directive("'use client'")

type preset = {

Date and Time Picker

@@directive("'use client'")

@react.component

Booked dates

@@directive("'use client'")

@react.component

Custom Cell Size

@@directive("'use client'")

@react.component

You can customize the size of calendar cells using the --cell-size CSS variable. You can also make it responsive by using breakpoint-specific values:

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

Or use fixed values:

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

Week Numbers

Use showWeekNumber to show week numbers.

@@directive("'use client'")

@react.component

API Reference

See the React DayPicker documentation for more information on the Calendar component.