Week Numbers and Footer

Week Numbers

To display the column with week numbers, use the showWeekNumber prop.

Prop Name	Type	Description
showWeekNumber	boolean	Display the week numbers.

<DayPicker showWeekNumber />

Handling Week Numbers Click

To handle clicks on the week numbers, you can set the WeekNumber custom component:

<DayPicker
  showWeekNumber
  components={{
    WeekNumber: (props) => (
      <button onClick={() => alert(`Week ${props.weekNumber}`)}>
        {props.weekNumber}
      </button>
    ),
  }}
/>

Selecting the Whole Week

In selection mode, you can create a custom selection that selects the entire week when a day is clicked.

Footer as Live Region

Use the footer prop to display a footer below the calendar. The footer acts as a live region to announce changes to screen readers. For more information on making the calendar accessible, see the Accessibility guide.

Prop Name	Type	Description
footer	ReactNode | string	Content rendered below the calendar as an ARIA live region for announcements.

export function Footer() {
  const [selected, setSelected] = React.useState<Date>();
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected
          ? `You picked ${selected.toLocaleDateString()}.`
          : "Please pick a date."
      }
    />
  );
}

Custom Components

In DayPicker, you can replace the components used internally to render the calendar. For more information, see the Custom Components guide.

Prop Name	Type	Description
components	CustomComponents	Change the internal components used to render the calendar.
classNames	ClassNames	Use custom class names instead of the default ones.