weekStartDay and highlightWeekends props

[archer87pl]

I use react-date-picker version 5 but I would like to migrate to React 16 that's why I want to upgrade react-date-picker to version 6. However, Calendar component is missing in version 6. After installing react-calendar it appears that weekStartDay and highlightWeekends properties which are present in react-date-picker version 5 are missing in react-calendar component. Could you help me?

How can I migrate react-date-picker version 5 to react-calendar and set week start day?

[wojtekmaj]

Hey there! Glad you asked.

You can also set calendar type by passing calendarType prop. "US" will set the week to start on Sunday, "ISO 8601" - on Monday.
If not provided, week start day is automatically determined by your locale. As for now, "en-US" will give you a calendar starting on Sunday, and everything else - on Monday. Locale can be set using locale prop.
If locale is also not provided, its value will automatically be determined based on user's browser settings.

Side note: Now that I reviewed the code it seems like I should add more locales to the list, but I'm answering based on current state of this app.

As for highlightWeekends - calendar tiles that happen to be on Saturday and Sunday have their own className, react-calendar__month-view__days__day--weekend. If you want them highlighted, just apply whatever styles you like to this class :)

[archer87pl]

Thanks for your answer. That helps me a lot :).
However I prefer explicit old style for setting week start day. I will have to implement HOC which wraps new calendar component and converts week start date to specific calendarType.
BTW, are you planning to add weekStartDay to calendar props?

Thanks

[wojtekmaj]

Hey @archer87pl,
as for now I don't think I'm planning to implement weekStartDay. That would leave us with three ways of directly or indirectly defining it, and I'm afraid this might quickly get confusing to develop with and develop develop ;)

Another thing I must take into consideration is that US and ISO 8601 calendars not only differ by week start day. For example, they have entirely different approach on how to count week numbers.

Also not sure if you really need a HOC for this, it'd be just one function:

const toCalendarType = (weekStartDay) =>
  weekStartDay === 0 ? 'US' : 'ISO 8601'
}

usage:

<DatePicker // or: <Calendar
  calendarType={toCalendarType(0)}
/>