@react-datepicker/ui
  • 👋Welcome
  • Getting Started
    • Quickstart
  • Documentation
    • 🔨Building your calendar
    • ⏭️Adding months navigation
    • Arrange to weeks
    • 🎨Design & Customizations
    • 📆Range Picker
    • Calendar options
    • 🌍Localization
    • 🗓️Events scheduling
  • UI Components
    • Calendar
    • Datepicker
    • DateRangePicker
  • Group 1
    • Page 1
Powered by GitBook
On this page
  1. Documentation

Calendar options

useCalendar hook gets an object of type CalendarOptions - this allows you to set your desired configuration and behavior. Each of the options has its default (see below) and you can call the hook without the options object.

useCalendar({
  startMonth: 1, // January
  startYear: 2024,
  numberOfDisplayedMonths: 1,
  isRangePicker: false,
  minDate: undefined,
  maxDate: undefined,
  allowFuture: true,
  allowPast: true,
  locale: 'en'
});
Parameter
Description
Type
Default

The month to start from

number

today's month

The year to start from

number

today's year

Number of months that are displayed to the user to select from

number

1

Wether the calendar instance is a range picker, allowing the user to select 2 dates representing a range

boolean

false

The minimal date that can be selected by the user

Date

undefined

The maximum date that can be selected by the user

Date

undefined

Should the user be allowed to choose future dates.

boolean

true

Should the user be allowed to choose past dates.

boolean

true

The locale to be used

string

en

PreviousRange PickerNextLocalization

Last updated 5 months ago

startMonth
startYear
numberOfDisplayedMonths
isRangePicker
minDate
maxDate
allowFuture
allowPast
locale