React-native-calendars: Locale using other packages

[joaosauer]

Hi,

Currently we do have the LocaleConfig, where you can set it to other languages.
Would be possible to have this being done using other packages that already do the locale? For example, I'm using the react-native-i18n
I would like to use this one to set the texts for the react-native-calendars, to keep everything in the same place. Would be possible?

[tautvilas]

Hi, unfortunately currently there is no such possibility. If you see a way how this could be done you can do a PR

[tad-lispy]

Hey! Thanks for React Native Calendars. It's very good!

To add my 2 euro cents here: it seems that most if not all strings that are used in this package are available in Moment.js locale modules. I bet it's quite common to use Moment in projects that also use react-native-calendars. It would be nice to have some way to reuse locales from Moment. Maybe some helper function that would take Moment's locale and transform it into Calendar's format. Something along this line:

LocaleConfig.fromMoment(require('moment/locales/nl'));

[tad-lispy]

Ok, ⚠️ it's a hack so use at your own risk ☠️ , but this is how we can piggyback on Moment.js locales:

import { LocaleConfig } from 'react-native-calendars';

const calendarLocaleConfig = locale => {
  const moment_locale = Moment.localeData(locale);
  const {
    monthsShort,
    weekdays,
    weekdaysShort,
    weekdaysMin
  } = moment_locale._config;

  return {
    monthNames: moment_locale.months(),
    monthNamesShort: monthsShort,
    dayNames: weekdays,
    dayNamesShort: weekdaysMin || weekdaysShort
  };
};

and with that defined:

import Moment from 'moment/min/moment-with-locales';
import { LocaleConfig } from 'react-native-calendars';

Moment.locale([locale, 'en']);
LocaleConfig.locales[locale] = calendarLocaleConfig(locale);
LocaleConfig.defaultLocale = locale;

Where locale is assigned to something like 'nl' or 'pr-br'.

Thanks to @hysan for providing a hint on how to load Moment with locales in a React Native project.

Again, be warned that above we are using undocumented APIs of Moment, so although it works as of posting this comment (Moment.js v. 2.19.4), it may break without warning in the future.

[gitKempf]

The solution described above is still working on "moment": "2.24.0", but now there are documented API methods to get the list of months or weekdays.

const calendarLocaleConfig = locale => {
  const moment_locale = moment.localeData(locale);

  return {
    monthNames: moment_locale.months(),
    monthNamesShort: moment_locale.monthsShort(),
    dayNames: moment_locale.weekdays(),
    dayNamesShort: moment_locale.weekdaysShort(),
  };
};

and with that defined:

import moment from 'moment/min/moment-with-locales';
import {LocaleConfig} from 'react-native-calendars';

moment.locale(localeCode);
LocaleConfig.locales[localeCode] = calendarLocaleConfig(localeCode);
LocaleConfig.defaultLocale = localeCode;

Where localeCode is assigned to something like 'nl' or 'pr-br'.