Calendar

A date picker that allows entering a date using a calendar.

Usage

To display a Calendar, supply a mode to Calendar. Calendar can display three different modes: single, multiple, or range.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="single" />;

Single

Calendars in single mode allow the user to select up to one date.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="single" />;

Multiple

Calendars in multiple mode allow the user to select more than one date.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="multiple" />;

Range

Calendars in range mode allow the user to select a range of dates.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="range" />;

Show input

When showInput is enabled, the Calendar will show an input field which allows the user to input a date. This works for all modes.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="multiple" showInput />;

Controlled state

Calendars can be controlled by passing a selected and an onSelect.

import { useState } from "react";
import moment from "moment";
import { Calendar } from "stylus-ui/Calendar";
import { Button } from "stylus-ui/Button";
import { Popover, PopoverTrigger, PopoverContent } from "stylus-ui/Popover";

export default () => {
  const [selected, onSelect] = useState(new Date());
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>{moment(selected).format("MMMM D, YYYY")}</Button>
      </PopoverTrigger>
      <PopoverContent className="p-0">
        <Calendar
          mode="single"
          showInput
          theme="dark"
          selected={selected}
          onSelect={onSelect}
        />
      </PopoverContent>
    </Popover>
  );
};

Formatting dates

Dates displayed in a Calendar input can be formatted by passing in a format string. This string should follow moment’s formatting guide.

March 2026

import { Calendar } from "stylus-ui/Calendar";

export default () => (
  <Calendar
    mode="single"
    showInput
    placeholder="Selected Date: Month, Day, Year"
    format="[Selected Date:] MMMM D, YYYY"
  />
);

API Reference

`Calendar`

A date picker that allows entering a date using a calendar.

`autoFocus`

boolean

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

`captionLayout`

"label" | "dropdown" | "dropdown-months" | "dropdown-years"

Show dropdowns to navigate between months or years.

true: display the dropdowns for both month and year
label: display the month and the year as a label. Change the label with the formatCaption formatter.
month: display only the dropdown for the months
year: display only the dropdown for the years

Note: showing the dropdown will set the start/end months {@link fromYear} to 100 years ago, and {@link toYear} to the current year. @see https://daypicker.dev/docs/customization#caption-layouts

`className`

string & Partial<ClassNames>

Class name to add to the root element. Override class names for calendar elements.

`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

`components`

Partial<CustomComponents>

Change the components used for rendering the calendar elements. @see https://daypicker.dev/guides/custom-components

`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

`defaultMonth`

Date = "The current month"

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

`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

`disabled`

Apply the disabled modifier to the matching days. @see https://daypicker.dev/docs/selection-modes#disabling-dates

`disableNavigation`

boolean

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

`endMonth`

Date

The latest month to end the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates

`excludeDisabled`

boolean

When true, the range will reset when including a disabled day. @since V9.0.2 @since V9.0.2

`firstWeekContainsDate`

1 | 4

The day of January, which is always in the first week of the year. @see https://daypicker.dev/docs/localization#first-week-contains-date

`fixedWeeks`

boolean

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

`footer`

ReactNode

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

`format`

string

Date format string for the input (e.g. “MM/dd/yyyy”).

`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

`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

`hidden`

Apply the hidden modifier to the matching days. Will hide them from the calendar. @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier

`hideNavigation`

boolean

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

`hideWeekdays`

boolean

Hide the row displaying the weekday row header. @since 9.0.0

`id`

string

A unique id to add to the root element.

`ISOWeek`

boolean

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

`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

`lang`

string

Add the language tag to the container element.

`locale`

Partial<Locale> = "enUS - The English locale default of `date-fns`."

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”; @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

`max`

number

The maximum number of selectable days. The maximum number of days to include in the range.

`min`

number

The minimum number of selectable days. The minimum number of days to include in the range.

`mode`

"single" | "multiple" | "range"

Enable the selection of a single day, multiple days, or a range of days. @see https://daypicker.dev/docs/selection-modes

`modifiers`

Record<string, Matcher | Matcher[] | undefined>

Add modifiers to the matching days. @see https://daypicker.dev/guides/custom-modifiers

`modifiersClassNames`

ModifiersClassNames

Change the class name for the day matching the modifiers. @see https://daypicker.dev/guides/custom-modifiers

`modifiersStyles`

ModifiersStyles

Change the class name for the day matching the {@link modifiers}. @see https://daypicker.dev/guides/custom-modifiers

`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

`nonce`

string

A cryptographic nonce (“number used once”) which can be used by Content Security Policy for the inline style attributes.

`numberOfMonths`

number = 1

The number of displayed months. @defaultValue 1 @see https://daypicker.dev/docs/customization#multiplemonths

`onDayBlur`

DayEventHandler<FocusEvent<Element, Element>>

Event handler when a day is blurred.

`onDayClick`

DayEventHandler<MouseEvent<Element, MouseEvent>>

Event handler when a day is clicked.

`onDayFocus`

DayEventHandler<FocusEvent<Element, Element>>

Event handler when a day is focused.

`onDayKeyDown`

DayEventHandler<KeyboardEvent<Element>>

Event handler when a key is pressed on a day.

`onDayKeyPress`

DayEventHandler<KeyboardEvent<Element>>

@private @deprecated Use a custom DayButton component instead.

`onDayKeyUp`

DayEventHandler<KeyboardEvent<Element>>

@private @deprecated Use a custom DayButton component instead.

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

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

`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

`onSelect`

Event handler when a day is selected. Called when a date or range is selected. Event handler when days are selected. Event handler when the selection changes. Event handler when a range is selected.

`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

`pagedNavigation`

boolean

Paginate the month navigation displaying the numberOfMonths at a time. @see https://daypicker.dev/docs/customization#multiplemonths

`placeholder`

string

Placeholder for the optional text input.

`required`

boolean

Whether the selection is required. @see https://daypicker.dev/docs/selection-modes

`reverseMonths`

boolean

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

`selected`

Date | Date[] | DateRange

The selected date. The selected dates. The selected range.

`showInput`

boolean = false

When true, show a text input above the calendar for typing dates.

`showOutsideDays`

boolean

Show the outside days (days falling in the next or the previous month). @see https://daypicker.dev/docs/customization#outside-days

`showWeekNumber`

boolean

Show the week numbers column. Weeks are numbered according to the local week index.

To use ISO week numbering, use the ISOWeek prop.
To change how the week numbers are displayed, use the formatters prop. @see https://daypicker.dev/docs/customization#showweeknumber

`startMonth`

Date

The earliest month to start the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates

`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

`timeZone`

string

The time zone (IANA or UTC offset) to use in the calendar (experimental). See Wikipedia for the possible values.

Time zones are supported by the TZDate object by the @date-fns/tz package. Please refer to the package documentation for more information. @since 9.1.1 @experimental @see https://daypicker.dev/docs/time-zone

`title`

string

Add a title attribute to the container element.

`toDate`

Date

@private @deprecated This prop has been removed. Use hidden={{ after: date }} instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates

`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

`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

`useAdditionalDayOfYearTokens`

boolean

Enable YY and YYYY for day of year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens

`useAdditionalWeekYearTokens`

boolean

Enable DD and DDDD for week year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens

`weekStartsOn`

0 | 3 | 2 | 1 | 4 | 5 | 6

The index of the first day of the week (0 - Sunday). Overrides the locale’s one. @see https://daypicker.dev/docs/localization#first-date-of-the-week