clauderic / react-infinite-calendar

✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.

Home Page:http://clauderic.github.io/react-infinite-calendar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Changing locales does not change month names

robertfoster550 opened this issue · comments

Hello! Hopefully someone can provide some assistance, as nothing I try seems to work.

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've seen on other issue threads that this might be due to a problem with the version of date-fns I have not being supported by react-infinite-calendar (which has ^1.27.2 as the supported 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"
  },

From what I understand, this should mean that the calendar uses the older date-fns. 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!

I was finally able to figure out the answer myself, and it wasn't too bad. Hopefully it might help someone else struggling with this.

I didn't use the resolution. Instead, all I had to do was provide the locale (inside of the locale object shown above) with the location of date-fns inside of the node_modules that come with the react-infinite-calendar. So now my 4th line of code posted above reads "locale: require('react-infinite-calendar/node_modules/date-fns/locale/de')" and the rest is the same. This version of date-fns is the correct one, and it worked without issue once I made this change.

Good luck!