airbnb/react-dates Display Week Number on DayPickerRangeController

Question

Using DayPickerRangeController from airbnb/react-dates (12.7.1), I would like to display the week number on the left of the day picker for each weeks.

Here is what I currently have

Here is what I would like to see on my calendar

Is there any prop that can help or is there an already existing solution?

Answer 1

airbnb/react-dates does not support any props to display the week no. You can have a look at rc-calender as other alternative.

Answer 2

As mentionned by @ShridharBavannawa, there's currently no support for displaying week number. However, there's a related issue open on github where Jussi Niinikoski suggests a hack that help; Instead of displaying week number on the side of each week, one can display them in every date cell with the renderDayContents property as follow:

renderDayContents={(day) => (
  <>
    <p>{day.format('W')}</p>
    <p>{day.format('D')}</p>
  </>
)

Where day would be a momentJS object. You can then style the cell to your taste.