CODEWITHSUNDEEP
reactjsdatepickercalendarreact-dates
Blapi
Blapi

Reputation: 31

airbnb/react-dates Display Week Number on DayPickerRangeController

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

My Day Picker

Here is what I would like to see on my calendar

Calendar with weeks number displayed

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

Upvotes: 1

Views: 1398

Answers (2)

theFreedomBanana
theFreedomBanana

Reputation: 2610

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.

Upvotes: 0

ShridharBavannawar
ShridharBavannawar

Reputation: 174

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

Upvotes: 1

Related Questions