useCalendar: Add support for overriding first day of week

[selbekk]

🙋 Feature Request

Specifying the first day of the week (monday or sunday, typically) should be supported.

💁 Possible Solution

Add a firstDayOfWeek override to the useDatepickerState hook, for instance.

[reidbarber]

From https://github.com/adobe/react-spectrum/discussions/3553#discussioncomment-3754060:

You can just reorder the returned days like:

  let [first, ...rest] = weekDays;
  weekDays = [...rest, first];

Example: https://codesandbox.io/s/calendar-starting-on-monday-q6kr3c?file=/src/CalendarGrid.js

[selbekk]

I could, but I would have to add custom logic for the locales that have this by default.

[LFDanLu]

@selbekk We were discussing this in our grooming session today and were wondering what your use case was for this. Is there a particular locale that you wanted to override?

[selbekk]

@selbekk We were discussing this in our grooming session today and were wondering what your use case was for this. Is there a particular locale that you wanted to override?

Well, mostly for overriding the US default. Lots of European sites used the US English as their alternative locale, but have never seen Sunday as the first day in any calendar whatsoever. So presenting them with that choice may seem odd.

[devongovett]

So you want English language but for a different region? Would setting the locale to something like "en-DE" (eg for Germany) work? We use the region code to determine the first day of the week, not the language.

[selbekk]

I could (this is my workaround today), but if the language of the site is "en-US", the locale should reflect that as well.

Using the en-US locale also introduces am/pm, but at least there you can specify a 24 hour clock

[kristian-puccio]

Just a comment, the work around doesn't work, it's re-orders the days of the week correctly but then the dates don't adjust accordingly.

So 1st of May 2023 is a Monday but it will show as a Tuesday (In my locale) using the above work around.

I would like an option to change it as well, my locale for some reason starts the week on Monday but it's much more common here to consider the start of the week Sunday.

[devongovett]

What's your locale?

[kristian-puccio]

Australia/Melbourne

But I don't think my locale would affect the re-ordering of the days to be wrong. The issue is that the snippet above re-orders the day labels but not the dates in the calendar below.

One thing is that Apple provides a switch in their preferences to determine the start of the week, so sorta seems like a nice best practice to offer it.

[devongovett]

I think that was a bug (#4585) that was just fixed (#4598). Should be released soon (or try the nightly).

[kristian-puccio]

Awesome thanks!

[Capsicum42]

Hi, in my company our planning per week is from Saturday to Friday and I would like to display all calendars accordingly.

If the dates are not included in the month, the calendar should fill it with the dates from the previous month.

Is there an example, how to implement this with react-aria ? (This is using react-datepicker) Regards Holger

[LFDanLu]

Talked about this with the team today, we think this is a reasonable request but was wondering if anyone had any ideas about the possible API for this override, specifically with considerations to make it locale agnostic.

[Capsicum42]

The other libraries have a property, where you just can set set the "start day" of week. As default it uses the value from the locale.

e.g. https://www.npmjs.com/package/react-datepicker uses a property called: calendarStartDay={6}. // Start on Saturday

[ArtemFedorchuk]

I'm blocked by this issue🙁😢 I need to have a Monday as the first day of the week; Like this:

Currently, I have this:

[devongovett]

Could you explain why this is important for you? Overriding the locale may be unexpected for users.

[Capsicum42]

In my company we perform planning of our business activities from Saturday to Friday. To display a complete "Work / Planning" week, the calendar week should start on Saturday. In this case, one of "our" weeks is one row in the calendar.

Most of the calendar / date-picker for react can override the "start of week day"

[ArtemFedorchuk]

Could you explain why this is important for you? Overriding the locale may be unexpected for users.

In my project, it's important to have such a calendar which will start with Monday as the first day of the week. Because our product uses the people from Europe and most of them from Germany. They want to use and see such variants.

I don't want to install an additional library for a such case.

[devongovett]

Calendar already adjusts the first day of the week based on the user's locale though, so you shouldn't need to override it in that case.

[hosmelq]

In my case, I am in Nicaragua, and if I set the calendar to Spanish (Latin America), the first day is still on Sunday. Usually, in Latin America, Monday is the first day of the week.

[snowystinger]

That looks like a bug for CLDR. I see

new Intl.Locale('en-US').weekInfo
// {firstDay: 7, weekend: Array(2), minimalDays: 1}
new Intl.Locale('es-NI').weekInfo
// {firstDay: 7, weekend: Array(2), minimalDays: 1}

Both say that the first day of the week is Sunday

[hunganhAtWhill]

I dont think it is a bug, since officially start of week in US is Sunday. With that said, sometimes we want to show the calendar starting from a specific day of the week and not always based on the Intl.Locale. This feature is needed I think.

[snowystinger]

I dont think it is a bug, since officially start of week in US is Sunday.

I don't follow, both of them show Sunday, which @hosmelq is saying is wrong for Nicaragua. I included the US in that sample to show that they both give the same day, Sunday.

You can change the locale of the calendar by changing what is in the Intl Provider. IE you could wrap the calendar in question specifically with its own Intl Provider which differs from the App level one.

I know we have some other tickets to support some various business/financial calendars. Would this ticket better match your needs? https://github.com/adobe/react-spectrum/issues/3270

[joshuajaco]

Could you explain why this is important for you? Overriding the locale may be unexpected for users.

Some users might speak a different language from the country they live in. In that case you would likely want the locale to be different from the start of the week. Google Calendar for example lets you select the language, country and the start of the week separately.

[joshuajaco]

Our users expect to be able to select a start of the week that is different from their locale/language. We are now using our own implementation of getWeeksInMonth and state.getDatesInWeek to allow this.

[hunganhAtWhill]

Also, imagine a management portal scenario, where you can manage remote facilities. In that case all that is shown on the UI must be in local format of the facility you are currently viewing including when does the week start, no matter where the browser of the manager is

[hunganhAtWhill]

I don't follow, both of them show Sunday, which @hosmelq is saying is wrong for Nicaragua

@snowystinger maybe it is indeed wrong, but at least according to Intl.Locale it starts from Sunday. In any case the need to specify first day of week is plently apparent to me. Intl.Locale being wrong / outdated in some cases is even more reason to support this feature.

[hsuanyi-chou]

In Taiwan, some people are accustomed to considering Sunday as the first day of the week, while others consider Monday as the first day. As for the government calendar, Sunday is considered the first day.

It would be beneficial to have a parameter that allows users to set their preferred first day of the week. Both of these practices are common in Taiwan.

I've tried to create the feature, but I have no idea how to offset the date to meet th(a.k.a weekDay).

[anclark686]

Just wanted to post a workaround, since the codeSandbox example doesn't work. I wrapped my calendar component (only) in a I18nProvider and changed the locale to en-DE for Monday start, but kept en-US for Sunday start. Not the most programmatic way, but it gets the job done.

[AmelloAster]

Are there any viable options at this point?

[dmtrek14]

I agree that having such a feature would be nice. A use case: creating an application for a multinational company, but the company wants to choose a standard calendar for the company. This might mean that even though Sunday is technically the first day of the week in the US, the company may want to use Monday as a starting day because most of the company is not US-based or this is simply how the company wants to standardize discussion of work periods across the company.

date-fns handles this by allowing you pass in various options, such as a locale or the starting day: https://date-fns.org/v3.6.0/docs/startOfWeek#. The code for that is here: https://github.com/date-fns/date-fns/blob/ddb34e083/src/startOfWeek/index.ts

Something like that here would be very nice. I think the change could go in https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/date/src/queries.ts to allow an optional param of weekStartsOn to the startOfWeek function. But there are probably other places in the stack where such a thing could be added.

[joshuajaco]

Our customers expect to see date pickers with their "business week" with a configurable start of the week. This is still blocking us from moving our date picker to use react-aria-components. I haven't found a way to implement this without dropping down to the hook API. Not sure if this is part of this issue or rather https://github.com/adobe/react-spectrum/issues/3270.

[lxcid]

I do agree with ability to change start of the week, sometimes locale don't capture it accurately due to political/racial/religions reasons, especially, in a multi racial countries, not everyone might follow what politically is the start of the week and locale only capture till the political level.

[lxcid]

another good reason is in a remote working world people might follow the start of week of the employer but do not want to adjust their locale.

also, it would be useful to find out the weekday of the calendar date https://en.m.wikipedia.org/wiki/ISO_week_date