Material-ui-pickers: Set first day in calendar to Monday

[ysokolovsky]

Hello.
Sorry if this is a wrong place to ask this question, but I cannot find how can set the first day of the week to Monday.

Is this possible?

[cherniavskii]

@ysokolovsky Hi, first day of week depends on your locale. You can set it like this: https://github.com/dmtrKovalenko/material-ui-pickers#l10n

[ysokolovsky]

@cherniavskii unfortunately, now it's also broken

as you can see, weekday names stay in English even after changing the locale, also today is Tue 23, but the calendar displays it as Monday

[dmtrKovalenko]

Yep, seems like moment doesnt change it - we should do it manually as we wish to replace moment at all.

[cherniavskii]

It works for me.
I set French locale in moment, see: https://codesandbox.io/s/r051xlj4mm

Looks like reported bug is reproducible only when toggling locale without page reload

[dmtrKovalenko]

Close due to no updates.

[oefimov]

@dmtrKovalenko hello, here's a reproducer (russian locale):
https://codesandbox.io/s/xr0mn0yo8z

[dmtrKovalenko]

Fixed by #371

[Joseph-Cass]

Hello.
Sorry if this is a wrong place to ask this question, but I cannot find how can set the first day of the week to Monday.

Is this possible?

I feel like this question still hasn't been answered... I cannot achieve this effect on my KeyboardTimePicker.

[oliviertassinari]

@Joseph-Cass Set the right locale.

[Joseph-Cass]

@Joseph-Cass Set the right locale.

And what is the "right locale" to start the week on a Monday?

[oliviertassinari]

@Joseph-Cass What's your use case? Why do you need the week to start Monday?

[Joseph-Cass]

Many calendars start the week on a Monday (default for iOS and Outlook from my experience), at least in the UK.

I believe Monday is the most logic start of the week, but even if you disagree, I believe this should be a simple setting to change? (I have also still had 0 success with the suggestions above, and changing the locale doesn't seem to change anything for my KeyboardTimePicker)

The react-big-calendar makes it easy by importing momentLocalizer from 'react-big-calendar', adding const localizer = momentLocalizer(moment) and setting localizer={localizer}.

[dmtrKovalenko]

Make sure that all libraries are using en-US as default locale. It is some kind of standard. If your app is using en-UK locale you need to explicitly specify it.

We are only referring selected locale. The same for clock cycle 12h/24h.

[oliviertassinari]

Many calendars start the week on a Monday (default for iOS and Outlook from my experience), at least in the UK.

Right, in the UK. It's all about the convention of your locale.

@dmtrKovalenko I have seen this confusion come quite often. We could consider a mini-FAQ for the date pickers.

[jcockbain]

@Joseph-Cass - using moment I changed the locale by updating week: { dow: 1 }. This seems to push back the start of the week by that many days, from the locale's inherent start day.

Code here: https://codesandbox.io/s/material-datepicker-set-start-day-8x4vy?file=/src/App.js.