Make it possible to start the week on monday

[RichardLindhout]

Starts Monday or Sunday
According to international standard ISO 8601, Monday is the first day of the week. It is followed by Tuesday, Wednesday, Thursday, Friday, and Saturday. Sunday is the 7th and last day of the week.

Although this is the international standard, several countries, including the United States and Canada, consider Sunday as the start of the week.

Source: https://www.timeanddate.com/calendar/days/#:~:text=Starts%20Monday%20or%20Sunday,last%20day%20of%20the%20week

[ravi-poonia]

@RichardLindhout How are planning to handle this? I can assist you with this on my free time. Can you describe the solution if you have one in mind.

[RichardLindhout]

It's fairly complex I think

Layout can be changed here:
https://github.com/web-ridge/react-native-paper-dates/blob/master/src/DayNames.tsx

But also the grid need to be generated another way

https://github.com/web-ridge/react-native-paper-dates/blob/master/src/Month.tsx#L117

[Precho]

Hello, are you working on it ? Is there any possibilty to set Monday as a first day of a week ?

[RichardLindhout]

Not yet. But it'll be added in the future

[Precho]

Do you know exactly when? I wonder if it is a matter of weeks. I'm looking forward :)

[RichardLindhout]

I'm still thinking about the best approach to this as there are some hard edge cases. E.g if the month starts on sunday the grid has a different outcome when the day starts on monday and the grid need to be calculated up front. I have however change this in the latest version so I could do more calculations. I think it will be added within 2 months but it is not a priority for one of our customers right now so I'm not sure when exactly. I have disabled some week days in my app e.g. Sunday, Saturday with disableWeekDays

[nandorojo]

In the US, week typically starts on Sunday. So maybe this should be an option if it’s going to change.

[RichardLindhout]

@nandorojo I will :)

[Isaccobosio]

I found a salution.. or something
In Month.tsx I put this code

const isFirstWeek = weekGrid === 0
const realDayIndex = emptyDays - dayIndex -1 // put a -1
const beforeWeekDay = isFirstWeek && realDayIndex > 0
const dayOfMonth = weekGrid * 7 + dayIndex +1 - emptyDays + 1 // put a +1 after dayIndex

And for change name of week day (I mean to make week start with monday) I put this

const weekdays = [
  new Date(2020, 7, 3),
  new Date(2020, 7, 4),
  new Date(2020, 7, 5),
  new Date(2020, 7, 6),
  new Date(2020, 7, 7),
  new Date(2020, 7, 8),
  new Date(2020, 7, 9),
]

onDayNames.tsx
Hope it could be useful

[RichardLindhout]

This works but the height of the month needs to be correct also so that is a hard thing I think

[JB712]

Any update on this @RichardLindhout ?

[kacper-cyra]

I found a salution.. or something In Month.tsx I put this code

const isFirstWeek = weekGrid === 0
const realDayIndex = emptyDays - dayIndex -1 // put a -1
const beforeWeekDay = isFirstWeek && realDayIndex > 0
const dayOfMonth = weekGrid * 7 + dayIndex +1 - emptyDays + 1 // put a +1 after dayIndex

And for change name of week day (I mean to make week start with monday) I put this

const weekdays = [
  new Date(2020, 7, 3),
  new Date(2020, 7, 4),
  new Date(2020, 7, 5),
  new Date(2020, 7, 6),
  new Date(2020, 7, 7),
  new Date(2020, 7, 8),
  new Date(2020, 7, 9),
]

onDayNames.tsx Hope it could be useful

To fix wrong number of weeks in month problem and still have the Monday as the first day of the week I have reversed yours changes in Month.tsx and changed getFirstDayOfMonth function in dateUtils.tsx to:

export function getFirstDayOfMonth({
  year,
  month,
}: {
  year: number
  month: number
}): number {
  const numberDayWeek = [6, 0, 1, 2, 3, 4, 5]
  const dayWeek = new Date(year, month, 1).getDay()

  return numberDayWeek[dayWeek]
}

From what I see it affects only UI and for me it works good enough 😄

[budwol]

please make it possible.

[iM-GeeKy]

PRs are welcome!

[tm00-git]

Why it is low priority? Unable to properly localize this component for my app used in europe