locale not apply

[HongAnhDo]

locale not apply

[HongAnhDo]

<InfiniteCalendar
locale={{
locale: require('date-fns/locale/fr'),
headerFormat: 'dddd, D MMM',
weekdays: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
blank: 'Aucune date selectionnee',
todayLabel: {
long: 'Aujourd'hui',
short: 'Auj.'
}
}}
/>

But month lable still use English language ?

[alouini333]

Did you install date-fns ?
https://date-fns.org/

[Aarbel]

@HongAnhDo have you solved your problem ? Facing same issue

[Aarbel]

Ok found the problem : version package of date-fns

I installed 2.0.0 but this lib supports 1.27.2

[qkreltms]

Still same in "react-infinite-calendar": "^2.3.1", "@types/react-infinite-calendar": "^2.3.3",

[qkreltms]

I'm using Typescript with React and I tried

datePicker.tsx

     import ko from "date-fns/locale/ko";
 //...
<InfiniteCalendar
          locale={{
            locale: ko,
            headerFormat: "YYYY MM DD",
            weekdays: ["월", "화", "수", "목", "금", "토", "일"],
            blank: "날짜를 선택하세요.",
            todayLabel: {
              long: "오늘"
            }
          }}
/>

index.d.ts

    locale?: {
+       locale?: any;
        blank?: string;
        headerFormat?: string;
        todayLabel?: {
            long: string;
        };
        weekdays?: string[];
        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    };

It works, I think it is due to index.d.ts

[JotaRaffalli]

Is there a fix to this issue yet?

[pazsea]

Ok found the problem : version package of date-fns

I installed 2.0.0 but this lib supports 1.27.2

Ah this worked for me too. Thank you!

[uchidayuma]

Ok found the problem : version package of date-fns

I installed 2.0.0 but this lib supports 1.27.2

I work too !
thanks.

[robertfoster550]

Hello! Hopefully someone can provide some assistance, as I seem to be running into the same issue.

I am using the calendar in an app where the user can swap between German and English. My locale constant is set up like this:

const locale: object =
    language === 'de'
        ? {
            locale: require('date-fns/locale/de'),
            blank: 'Kein Datum ausgewählt',
            headerFormat: 'ddd, D. MMMM',
            todayLabel: {
              long: 'Heute',
            },
            weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekStartsOn: 1, // Start the week on Monday
          }
        : {};

Everything works well in both languages, except for the month names, which always appear in English. I saw the note about the date-fns version, but unfortunately other parts of the app require date-fns ^2.16. So, I have tried adding a yarn resolution to my package.json, which looks like this:

"resolutions": {
    "react-infinite-calendar/**/date-fns": "^1.27.2"
  },

Unfortunately, that did not solve the issue. Does anyone have another work-around, or any advice on how to fix the dependency version issue?

Thank you!

[robertfoster550]

For anyone else looking for a solution, I was able to figure out one for me.

Largely my code posted above works, but instead of a resolution, I simply require the date-fns version from inside the react-infinite-calendar node_module, instead of the date-fns one like above. So my 4th line of code (as posted here) now reads:
locale: require('react-infinite-calendar/node_modules/date-fns/locale/de')
The localization is now working perfectly.

Hope this helps!

[qkreltms]

Seems fixed issue latest version @type/react-infinite-calendar