Skip to main content
React Native Calendars uses the xdate library’s LocaleConfig for internationalization. You can configure month names, day names, and other locale-specific settings.

​
Basic configuration

Import LocaleConfig and configure it before rendering your calendar: 
import { Calendar, LocaleConfig } from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: [
    'Janv.',
    'Févr.',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juil.',
    'Août',
    'Sept.',
    'Oct.',
    'Nov.',
    'Déc.'
  ],
  dayNames: [
    'Dimanche',
    'Lundi',
    'Mardi',
    'Mercredi',
    'Jeudi',
    'Vendredi',
    'Samedi'
  ],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};

LocaleConfig.defaultLocale = 'fr';

​
Locale configuration interface

Each locale object should include:
​
monthNames
string[]
required
Array of 12 full month names, starting with January
​
monthNamesShort
string[]
required
Array of 12 abbreviated month names, starting with January
​
dayNames
string[]
required
Array of 7 full day names, starting with Sunday
​
dayNamesShort
string[]
required
Array of 7 abbreviated day names, starting with Sunday
​
today
string
required
Label for “Today” button or indicator
Day names must start with Sunday (index 0), even if your calendar displays weeks starting with Monday. Use the firstDay prop to control which day appears first in the calendar display.

​
Setting the default locale

After defining locales, set the default: 
LocaleConfig.defaultLocale = 'fr';
This applies the locale to all calendar components in your app.

​
Example locales

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
  ],
  monthNamesShort: [
    'Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'
  ],
  dayNames: [
    'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
    'Jeudi', 'Vendredi', 'Samedi'
  ],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};
LocaleConfig.defaultLocale = 'fr';

​
Dynamic locale switching

You can switch locales at runtime: 
import { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';

function LocalizedCalendar() {
  const [locale, setLocale] = useState('en');

  const switchToFrench = () => {
    LocaleConfig.defaultLocale = 'fr';
    setLocale('fr');
  };

  const switchToEnglish = () => {
    LocaleConfig.defaultLocale = 'en';
    setLocale('en');
  };

  return (
    <>
      <Button title="French" onPress={switchToFrench} />
      <Button title="English" onPress={switchToEnglish} />
      <Calendar key={locale} /> {/* Key forces re-render */}
    </>
  );
}
Use a key prop with the locale value to force the calendar to re-render when the locale changes.

​
Week start day

The firstDay prop controls which day appears first in the week: 
<Calendar
  firstDay={1} // Monday (0 = Sunday, 1 = Monday, etc.)
/>
​
firstDay
number
Day index to start the week with:
  • 0 = Sunday
  • 1 = Monday
  • 2 = Tuesday
  • etc.
This is independent of the locale configuration and allows you to adapt the calendar to regional preferences.

​
Date formatting

The calendar uses YYYY-MM-DD format internally for date strings: 
markedDates={{
  '2024-03-15': { selected: true },
  '2024-03-16': { marked: true }
}}
This format is consistent across all locales and components.

​
Integration with i18n libraries

You can integrate LocaleConfig with popular i18n libraries: 
import { useTranslation } from 'react-i18next';
import { LocaleConfig } from 'react-native-calendars';

function setupCalendarLocale() {
  const { t, i18n } = useTranslation();
  
  LocaleConfig.locales[i18n.language] = {
    monthNames: t('calendar.months', { returnObjects: true }),
    monthNamesShort: t('calendar.monthsShort', { returnObjects: true }),
    dayNames: t('calendar.days', { returnObjects: true }),
    dayNamesShort: t('calendar.daysShort', { returnObjects: true }),
    today: t('calendar.today')
  };
  
  LocaleConfig.defaultLocale = i18n.language;
}

​
RTL (Right-to-Left) support

For RTL languages like Arabic or Hebrew: 
import { I18nManager } from 'react-native';
import { LocaleConfig } from 'react-native-calendars';

// Enable RTL layout
I18nManager.allowRTL(true);
I18nManager.forceRTL(true);

// Configure Arabic locale
LocaleConfig.locales['ar'] = {
  // ... Arabic locale configuration
};
LocaleConfig.defaultLocale = 'ar';

// The calendar will automatically adapt to RTL layout
<Calendar />
Enabling RTL requires an app restart. Make sure to set I18nManager settings early in your app’s lifecycle.

​
Complete example

import React, { useEffect, useState } from 'react';
import { View, Button } from 'react-native';
import { Calendar, LocaleConfig } from 'react-native-calendars';

// Define locales
LocaleConfig.locales['en'] = {
  monthNames: [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ],
  monthNamesShort: [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ],
  dayNames: [
    'Sunday', 'Monday', 'Tuesday', 'Wednesday',
    'Thursday', 'Friday', 'Saturday'
  ],
  dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  today: 'Today'
};

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
  ],
  monthNamesShort: [
    'Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'
  ],
  dayNames: [
    'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
    'Jeudi', 'Vendredi', 'Samedi'
  ],
  dayNamesShort: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  today: "Aujourd'hui"
};

function App() {
  const [locale, setLocale] = useState('en');

  useEffect(() => {
    LocaleConfig.defaultLocale = locale;
  }, [locale]);

  return (
    <View>
      <View style={{ flexDirection: 'row', gap: 10, margin: 10 }}>
        <Button 
          title="English" 
          onPress={() => setLocale('en')}
          disabled={locale === 'en'}
        />
        <Button 
          title="Français" 
          onPress={() => setLocale('fr')}
          disabled={locale === 'fr'}
        />
      </View>
      
      <Calendar
        key={locale}
        firstDay={locale === 'en' ? 0 : 1} // Sunday for English, Monday for French
        markedDates={{
          '2024-03-15': { selected: true }
        }}
      />
    </View>
  );
}

export default App;

​
Best practices

Set up LocaleConfig in your app’s entry point or a centralized configuration file:
// locale/calendar.ts
import { LocaleConfig } from 'react-native-calendars';

export function setupCalendarLocale() {
  LocaleConfig.locales['fr'] = { /* ... */ };
  LocaleConfig.defaultLocale = 'fr';
}

// App.tsx
import { setupCalendarLocale } from './locale/calendar';
setupCalendarLocale();
Detect and use the device’s system locale:
import { NativeModules, Platform } from 'react-native';

const deviceLocale = Platform.OS === 'ios'
  ? NativeModules.SettingsManager.settings.AppleLocale
  : NativeModules.I18nManager.localeIdentifier;

const shortLocale = deviceLocale.split('_')[0]; // 'en' from 'en_US'
LocaleConfig.defaultLocale = shortLocale;
Verify that your calendar displays correctly in all supported locales, especially for:
  • Long month names that might overflow
  • RTL languages
  • Different week start days
  • Special characters and diacritics
The LocaleConfig is a global singleton from the xdate library. Changes affect all calendar instances in your app.

Build docs developers (and LLMs) love

Get started for freeTalk to us