Calendar

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

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#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Calendar
Copy

Usage#

Copylet (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.

Copy- @module("react-day-picker")
+ @module("react-day-picker/persian")
external make: Props.t<'selected> => React.element = "DayPicker"

Selected Date (With TimeZone)#

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

Copymodule 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.

Range Calendar#

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

Month and Year Selector#

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

Presets#

Date and Time Picker#

Booked dates#

Custom Cell Size#

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:

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

Or use fixed values:

Copy<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.

API Reference#

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