Calendar

A date picker component for selecting single dates, date ranges, or multiple dates.

CMSPayload CMS Integration

Calendar components can be configured through CMS fields to set date constraints, default values, and display options for booking forms and event pickers.

CMS Demo

See how content editors configure calendars in a CMS:

Select Date

Choose your preferred date

April 2026

CMS FieldsEN

Label

Description

Show Week Numbers

Disable Past Dates

Disable Weekends

This simulates how a content editor configures date pickers in Payload CMS for booking forms and event selection.

CMS ConfigurationSimulates Payload CMS calendar configuration

Payload Block Example

// In your Payload CMS block config
export const DatePickerBlock = {
  slug: "date-picker",
  fields: [
    { name: "label", type: "text", localized: true },
    {
      name: "selectionMode",
      type: "select",
      options: [
        { label: "Single Date", value: "single" },
        { label: "Date Range", value: "range" },
        { label: "Multiple Dates", value: "multiple" },
      ],
      defaultValue: "single",
    },
    { name: "minDate", type: "date" },
    { name: "maxDate", type: "date" },
    { name: "showWeekNumbers", type: "checkbox" },
    { name: "required", type: "checkbox" },
  ],
}

Rendering the Block

import { Calendar } from "@mordecai-design-system/ui"

export function DatePicker({ data }) {
  return (
    <div>
      <label className="text-sm font-medium">{data.label}</label>
      <Calendar
        mode={data.selectionMode}
        disabled={[
          { before: new Date(data.minDate) },
          { after: new Date(data.maxDate) },
        ]}
        showWeekNumber={data.showWeekNumbers}
      />
    </div>
  )
}

Basic Usage

April 2026

CalendarA calendar for date selection

Installation

pnpm add @corew500/ui

Usage

import { Calendar } from "@mordecai-design-system/ui"

const [date, setDate] = useState<Date | undefined>()

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

Examples

Single Date Selection

const [date, setDate] = useState<Date | undefined>()

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

Date Range Selection

const [range, setRange] = useState<DateRange | undefined>()

<Calendar
  mode="range"
  selected={range}
  onSelect={setRange}
  numberOfMonths={2}
/>

Multiple Date Selection

const [dates, setDates] = useState<Date[] | undefined>()

<Calendar
  mode="multiple"
  selected={dates}
  onSelect={setDates}
/>

With Month/Year Dropdowns

<Calendar
  mode="single"
  captionLayout="dropdown"
  fromYear={2020}
  toYear={2030}
/>

With Week Numbers

<Calendar
  mode="single"
  showWeekNumber
/>

Disabled Dates

<Calendar
  mode="single"
  disabled={[
    { before: new Date() }, // Disable past dates
    { dayOfWeek: [0, 6] },  // Disable weekends
  ]}
/>

Multiple Months

<Calendar
  mode="single"
  numberOfMonths={2}
/>

Props

Prop	Type	Default	Description
`mode`	enum	—	Enable the selection of a single day, multiple days, or a range of days. @see https://daypicker.dev/docs/selection-modes
`required`	enum	—	Whether the selection is required. @see https://daypicker.dev/docs/selection-modes
`className`	string	—	Class name to add to the root element.
`classNames`	Partial<ClassNames> & Partial<DeprecatedUI<string>>	—	Change the class names used by DayPicker. Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework. @see https://daypicker.dev/docs/styling
`modifiersClassNames`	ModifiersClassNames	—	Change the class name for the day matching the `modifiers`. @see https://daypicker.dev/guides/custom-modifiers
`style`	CSSProperties	—	Style to apply to the root element.
`styles`	Partial<Styles> & Partial<DeprecatedUI<CSSProperties>>	—	Change the inline styles of the HTML elements. @see https://daypicker.dev/docs/styling
`modifiersStyles`	ModifiersStyles	—	Change the class name for the day matching the {@link modifiers}. @see https://daypicker.dev/guides/custom-modifiers
`id`	string	—	A unique id to add to the root element.
`defaultMonth`	Date	—	The initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month} and {@link onMonthChange}. @defaultValue The current month @see https://daypicker.dev/docs/navigation
`month`	Date	—	The month displayed in the calendar. As opposed to `defaultMonth`, use this prop with `onMonthChange` to change the month programmatically. @see https://daypicker.dev/docs/navigation
`numberOfMonths`	number	—	The number of displayed months. @defaultValue 1 @see https://daypicker.dev/docs/customization#multiplemonths
`startMonth`	Date	—	The earliest month to start the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates
`fromDate`	Date	—	@private @deprecated This prop has been removed. Use `hidden={{ before: date }}` instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`fromMonth`	Date	—	@private @deprecated This prop has been renamed to `startMonth`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`fromYear`	number	—	@private @deprecated Use `startMonth` instead. E.g. `startMonth={new Date(year, 0)}`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`endMonth`	Date	—	The latest month to end the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates
`toDate`	Date	—	@private @deprecated This prop has been removed. Use `hidden={{ after: date }}` instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`toMonth`	Date	—	@private @deprecated This prop has been renamed to `endMonth`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`toYear`	number	—	@private @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
`pagedNavigation`	enum	—	Paginate the month navigation displaying the `numberOfMonths` at a time. @see https://daypicker.dev/docs/customization#multiplemonths
`reverseMonths`	enum	—	Render the months in reversed order (when {@link numberOfMonths} is set) to display the most recent month first. @see https://daypicker.dev/docs/customization#multiplemonths
`hideNavigation`	enum	—	Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use {@link disableNavigation}. @since 9.0.0 @see https://daypicker.dev/docs/navigation#hidenavigation
`disableNavigation`	enum	—	Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use {@link hideNavigation}. @see https://daypicker.dev/docs/navigation#disablenavigation
`captionLayout`	enum	`label`	Show dropdowns to navigate between months or years. - `label`: Displays the month and year as a label. Default value. - `dropdown`: Displays dropdowns for both month and year navigation. - `dropdown-months`: Displays a dropdown only for the month navigation. - `dropdown-years`: Displays a dropdown only for the year navigation. Note: By default, showing the dropdown will set the {@link startMonth} to 100 years ago and {@link endMonth} to the end of the current year. You can override this behavior by explicitly setting `startMonth` and `endMonth`. @see https://daypicker.dev/docs/customization#caption-layouts
`reverseYears`	enum	—	Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`. @since 9.9.0 @see https://daypicker.dev/docs/customization#caption-layouts
`navLayout`	enum	—	Adjust the positioning of the navigation buttons. - `around`: Displays the buttons on either side of the caption. - `after`: Displays the buttons after the caption. This ensures the tab order matches the visual order. If not set, the buttons default to being displayed after the caption, but the tab order may not align with the visual order. @since 9.7.0 @see https://daypicker.dev/docs/customization#navigation-layouts
`fixedWeeks`	enum	—	Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month. @see https://daypicker.dev/docs/customization#fixed-weeks
`hideWeekdays`	enum	—	Hide the row displaying the weekday row header. @since 9.0.0
`showOutsideDays`	enum	`true`	Show the outside days (days falling in the next or the previous month). Note: when a {@link broadcastCalendar} is set, this prop defaults to true. @see https://daypicker.dev/docs/customization#outside-days
`showWeekNumber`	enum	—	Show the week numbers column. Weeks are numbered according to the local week index. @see https://daypicker.dev/docs/customization#showweeknumber
`animate`	enum	—	Animate navigating between months. @since 9.6.0 @see https://daypicker.dev/docs/navigation#animate
`broadcastCalendar`	enum	—	Display the weeks in the month following the broadcast calendar. Setting this prop will ignore {@link weekStartsOn} (always Monday) and {@link showOutsideDays} will default to true. @since 9.4.0 @see https://daypicker.dev/docs/localization#broadcast-calendar @see https://en.wikipedia.org/wiki/Broadcast_calendar
`ISOWeek`	enum	—	Use ISO week dates instead of the locale setting. Setting this prop will ignore `weekStartsOn` and `firstWeekContainsDate`. @see https://daypicker.dev/docs/localization#iso-week-dates @see https://en.wikipedia.org/wiki/ISO_week_date
`timeZone`	string	—	The time zone (IANA or UTC offset) to use in the calendar (experimental). See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the possible values. @since 9.1.1 @see https://daypicker.dev/localization/setting-time-zone
`noonSafe`	enum	—	Keep calendar math at noon in the configured {@link timeZone} to avoid historical second-level offsets drifting dates across midnight. This prop sets the time of the dates to noon (12:00). @since 9.13.0 @experimental @see https://daypicker.dev/localization/setting-time-zone#noonsafe
`components`	Partial<CustomComponents>	—	Change the components used for rendering the calendar elements. @see https://daypicker.dev/guides/custom-components
`footer`	enum	—	Add a footer to the calendar, acting as a live region. Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements. @see https://daypicker.dev/guides/accessibility#footer
`autoFocus`	enum	—	When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus DayPicker after a user action, for improved accessibility. @see https://daypicker.dev/guides/accessibility#autofocus
`initialFocus`	enum	—	@private @deprecated This prop will be removed. Use {@link autoFocus } instead.
`disabled`	enum	—	Apply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set. @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled
`hidden`	enum	—	Apply the `hidden` modifier to the matching days. Will hide them from the calendar. @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier
`today`	Date	—	The today’s date. Default is the current date. This date will get the `today` modifier to style the day. @see https://daypicker.dev/guides/custom-modifiers#today-modifier
`modifiers`	Record<string, Matcher \| Matcher[]>	—	Add modifiers to the matching days. @example const modifiers = { weekend: { dayOfWeek: [0, 6] }, // Match weekends holiday: [new Date(2023, 11, 25)] // Match Christmas }; <DayPicker modifiers={modifiers} /> @see https://daypicker.dev/guides/custom-modifiers
`labels`	Partial<Labels>	—	Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker. @see https://daypicker.dev/docs/translation#aria-labels
`formatters`	Partial<Formatters>	—	Formatters used to format dates to strings. Use this prop to override the default functions. @see https://daypicker.dev/docs/translation#custom-formatters
`dir`	string	—	The text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left. @see https://daypicker.dev/docs/translation#rtl-text-direction
`aria-label`	string	—	The aria-label attribute to add to the container element. @since 9.4.1 @see https://daypicker.dev/guides/accessibility
`aria-labelledby`	string	—	The aria-labelledby attribute to add to the container element. @since 9.11.0 @see https://daypicker.dev/guides/accessibility
`role`	enum	—	The role attribute to add to the container element. @since 9.4.1 @see https://daypicker.dev/guides/accessibility
`nonce`	string	—	A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.
`title`	string	—	Add a `title` attribute to the container element.
`lang`	string	—	Add the language tag to the container element.
`locale`	Partial<DayPickerLocale>	—	The locale object used to localize dates. Pass a locale from `react-day-picker/locale` to localize the calendar. @example import { es } from "react-day-picker/locale"; <DayPicker locale={es} /> @defaultValue enUS - The English locale default of `date-fns`. @see https://daypicker.dev/docs/localization @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
`numerals`	enum	—	The numeral system to use when formatting dates. - `latn`: Latin (Western Arabic) - `arab`: Arabic-Indic - `arabext`: Eastern Arabic-Indic (Persian) - `deva`: Devanagari - `beng`: Bengali - `guru`: Gurmukhi - `gujr`: Gujarati - `orya`: Oriya - `tamldec`: Tamil - `telu`: Telugu - `knda`: Kannada - `mlym`: Malayalam @defaultValue `latn` Latin (Western Arabic) @see https://daypicker.dev/docs/translation#numeral-systems
`weekStartsOn`	enum	—	The index of the first day of the week (0 - Sunday). Overrides the locale's default. @see https://daypicker.dev/docs/localization#first-date-of-the-week
`firstWeekContainsDate`	enum	—	The day of January that is always in the first week of the year. @see https://daypicker.dev/docs/localization#first-week-contains-date
`useAdditionalWeekYearTokens`	enum	—	Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens
`useAdditionalDayOfYearTokens`	enum	—	Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens
`onMonthChange`	MonthChangeEventHandler	—	Event fired when the user navigates between months. @see https://daypicker.dev/docs/navigation#onmonthchange
`onNextClick`	MonthChangeEventHandler	—	Event handler when the next month button is clicked. @see https://daypicker.dev/docs/navigation
`onPrevClick`	MonthChangeEventHandler	—	Event handler when the previous month button is clicked. @see https://daypicker.dev/docs/navigation
`onWeekNumberClick`	any	—	Event handler when a week number is clicked. @private @deprecated Use a custom `WeekNumber` component instead. @see https://daypicker.dev/docs/customization#showweeknumber
`onDayClick`	DayEventHandler<MouseEvent<Element, MouseEvent>>	—	Event handler when a day is clicked.
`onDayFocus`	DayEventHandler<FocusEvent<Element, Element>>	—	Event handler when a day is focused.
`onDayBlur`	DayEventHandler<FocusEvent<Element, Element>>	—	Event handler when a day is blurred.
`onDayKeyDown`	DayEventHandler<KeyboardEvent<Element>>	—	Event handler when a key is pressed on a day.
`onDayMouseEnter`	DayEventHandler<MouseEvent<Element, MouseEvent>>	—	Event handler when the mouse enters a day.
`onDayMouseLeave`	DayEventHandler<MouseEvent<Element, MouseEvent>>	—	Event handler when the mouse leaves a day.
`dateLib`	Partial<DateLib>	—	Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver). @since 9.0.0 @experimental
`onDayKeyUp`	DayEventHandler<KeyboardEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayKeyPress`	DayEventHandler<KeyboardEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayPointerEnter`	DayEventHandler<PointerEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayPointerLeave`	DayEventHandler<PointerEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayTouchCancel`	DayEventHandler<TouchEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayTouchEnd`	DayEventHandler<TouchEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayTouchMove`	DayEventHandler<TouchEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`onDayTouchStart`	DayEventHandler<TouchEvent<Element>>	—	@private @deprecated Use a custom `DayButton` component instead.
`selected`	enum	—	The selected date. The selected dates. The selected range.
`onSelect`	enum	—	Event handler when a day is selected. Event handler when days are selected. Event handler when the selection changes. Event handler when a range is selected.
`buttonVariant`	enum	`ghost`	—
`min`	number	—	The minimum number of selectable days. The minimum number of days to include in the range.
`max`	number	—	The maximum number of selectable days. The maximum number of days to include in the range.
`excludeDisabled`	enum	—	When `true`, the range will reset when including a disabled day. @since V9.0.2 @see https://daypicker.dev/docs/selection-modes#exclude-disabled @since V9.0.2

Disabled Matchers

The disabled prop accepts various matcher types:

// Disable specific dates
disabled={[new Date(2024, 0, 1), new Date(2024, 11, 25)]}

// Disable date range
disabled={{ from: new Date(2024, 0, 1), to: new Date(2024, 0, 7) }}

// Disable before/after
disabled={[{ before: new Date() }]}

// Disable days of week (0 = Sunday)
disabled={{ dayOfWeek: [0, 6] }}

// Disable with function
disabled={(date) => date.getDay() === 0}