Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wired Calendar component display errors #156

Open
benfortuna opened this issue Feb 27, 2021 · 3 comments
Open

Wired Calendar component display errors #156

benfortuna opened this issue Feb 27, 2021 · 3 comments

Comments

@benfortuna
Copy link

benfortuna commented Feb 27, 2021

The calendar component is showing Feb 28 2021 as a Monday, when it should be a Sunday.

image

Google calendar as comparison:

image

@elingerojo
Copy link
Contributor

Yes, there is an error when the first day of the week in the calendar is NOT Sunday.
This depends by locale region.
Most America is Sunday but most Europe is Monday ...and there are many other possibilities like Saturday and even Friday 😖

@elingerojo
Copy link
Contributor

elingerojo commented Feb 11, 2023

Since the code is already assuming Sunday as the first-day-of-the-week in a calendar, one solution is to compute the days needed to offset to different first-day-of-the-week.

Steps:

First, need to include code for the locale region, like "en-GB" or "de-DE".
At present, the code is only using the language part but not the region.

Second, get the first-day-of-the-week by the region stated.

Third, compute the "days distance" from Sunday to be used as first-day-of-the-week offset.

Fourth, offset two places. The weekday names header and the initial day number to fill the calendar. Example: If you start in Monday, you should offset the start day number by one, so the weekdays names match the date number also.

@elingerojo
Copy link
Contributor

For the First and Second steps there is an option to use a standard built-in property Intl.locale.weekInfo that return an object with a property firstDay among others.

Like:

const enGB = new Intl.Locale("en-GB");
console.log(enGB.weekInfo); // { firstDay: 1, weekend: [6, 7], minimalDays: 4 }

where firstDay is number from 1 to 7 where 1 means Monday, 2 is Tuesday, and so on ...up to Sunday = 7

The problem is that it is not totally supported by all major browsers (Firefox not yet, to date).

So, another option is to hardcode a region map to first-day-of-the-week.

I propose to code the two options but let the Intl.locale option commented in the code until it is fully supported. I understand that the hardcoded map is maintenance debt but al least we will have a solution now (and a pre-coded solution for the future in the comments).

(The Third and Fourth step are straight forward code.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants