Calendar

An interactive component to pick a single date.

Default example

<Calendar />

September 2025

Date selection

<Calendar
  selectedDate={new Date(2020, 0, 10)}
  onDateSelect={(date) => alert(date.toLocaleDateString())}
/>

January 2020

Date selection only for working days

It is the responsibility of the controller to assure that the `selectedDate` is not on a weekend. No validation will take place.

<Calendar
  selectedDate={new Date(2020, 0, 10)}
  disableWeekendDates={true}
  onDateSelect={(date) => alert(date.toLocaleDateString())}
/>

January 2020

Disabling past dates

It is the responsibility of the controller to assure that the `selectedDate` is not in the past. No validation will take place.

<Calendar
  selectedDate={new Date()}
  disablePastDates={true}
  onDateSelect={(date) => alert(date.toLocaleDateString())}
/>

September 2025

Disabling dates after one year

It is the responsibility of the controller to assure that the `selectedDate` is not in the past. No validation will take place.

<Calendar
  selectedDate={new Date()}
  disableAfterOneYearDates={true}
  onDateSelect={(date) => alert(date.toLocaleDateString())}
/>

To see the result you need to change the calendar to the same month in the next year.

September 2025

Date selection only for explicitly enabled dates

It is the responsibility of the controller to assure that the `selectedDate` is included in the `enabledDates`. No validation will take place.

<Calendar
  selectedDate={new Date(2020, 0, 10)}
  enabledDates={[new Date(2020, 0, 1), new Date(2020, 0, 2)]}
  onDateSelect={(date) => alert(date.toLocaleDateString())}
/>

January 2020

Props

Props	Type	Default
`selectedDate`	`Date`
`monthNames`	`string[]`	`["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]`
`weekDays`	`string[]`	`["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]`
`toPrevMonthLabel`	`SwitchMonth`	`() => "To January 2020"`
`toNextMonthLabel`	`SwitchMonth`	`() => "To January 2020"`
`onDateSelect`	`OnDateSelect`
`disableAfterOneYearDates`	`boolean`	`false`
`disablePastDates`	`boolean`	`false`
`disableWeekendDates`	`boolean`	`false`
`enabledDates`	`Date[]`

type OnDateSelect = (date: Date) => void;

type SwitchMonth = (
  newMonth: number,
  newYear: number,
  monthNames: string[],
) => string;