Globalization and Localization in the React Scheduler

The Scheduler component includes built-in localization to customize text for different languages and cultural preferences. Adapt UI text to languages like Arabic, German, and French by setting the locale property in a custom Provider with translation objects.

Configuration steps

1. Choose a locale from Syncfusion's React localization resources.

2. Install the @syncfusion/react-cldr-data package, which provides CLDR (Unicode Common Locale Data Repository) data for culture-specific formatting.

   npm

   npm i @syncfusion/react-cldr-data
   

   npm i @syncfusion/react-cldr-data

3. Import L10n and loadCldr from @syncfusion/react-base.

4. Import localization files and CLDR data for your chosen languages:

   App.tsx

   import { L10n, loadCldr } from "@syncfusion/react-base";
   import Localization from './locale.json';
   import * as enAllData from '@syncfusion/react-cldr-data/main/en/all.json';
   import * as deAllData from '@syncfusion/react-cldr-data/main/de/all.json';
   import * as frAllData from '@syncfusion/react-cldr-data/main/fr/all.json';
   import * as arAllData from '@syncfusion/react-cldr-data/main/ar/all.json';
   
   import * as numberingSystems from '@syncfusion/react-cldr-data/supplemental/numberingSystems.json';
   import * as weekData from '@syncfusion/react-cldr-data/supplemental/weekData.json';
   import * as currencyData from '@syncfusion/react-cldr-data/supplemental/currencyData.json';
   
   import * as enUSLocalization from '@syncfusion/react-locale/src/en-US.json';
   import * as frFRLocalization from '@syncfusion/react-locale/src/fr.json';
   import * as arFRLocalization from '@syncfusion/react-locale/src/ar.json';
   import * as deDELocalization from '@syncfusion/react-locale/src/de.json';
   

   import { L10n, loadCldr } from "@syncfusion/react-base"; import Localization from './locale.json'; import * as enAllData from '@syncfusion/react-cldr-data/main/en/all.json'; import * as deAllData from '@syncfusion/react-cldr-data/main/de/all.json'; import * as frAllData from '@syncfusion/react-cldr-data/main/fr/all.json'; import * as arAllData from '@syncfusion/react-cldr-data/main/ar/all.json'; import * as numberingSystems from '@syncfusion/react-cldr-data/supplemental/numberingSystems.json'; import * as weekData from '@syncfusion/react-cldr-data/supplemental/weekData.json'; import * as currencyData from '@syncfusion/react-cldr-data/supplemental/currencyData.json'; import * as enUSLocalization from '@syncfusion/react-locale/src/en-US.json'; import * as frFRLocalization from '@syncfusion/react-locale/src/fr.json'; import * as arFRLocalization from '@syncfusion/react-locale/src/ar.json'; import * as deDELocalization from '@syncfusion/react-locale/src/de.json';

5. Call loadCldr with the imported data to enable formatting for your selected cultures:

   App.tsx

   
   loadCldr(enAllData, deAllData, frAllData, arAllData, numberingSystems, weekData, currencyData);
   L10n.load({
   ...enUSLocalization,
   ...frFRLocalization,
   ...arFRLocalization,
   ...deDELocalization
   });
   

   loadCldr(enAllData, deAllData, frAllData, arAllData, numberingSystems, weekData, currencyData); L10n.load({ ...enUSLocalization, ...frFRLocalization, ...arFRLocalization, ...deDELocalization });

6. Load translation objects using L10n.load.

7. Set the locale property in the Provider to activate your chosen language.

Loading translations for culture

Use L10n.load from @syncfusion/react-base to load translation objects for different languages. This enables the Scheduler to dynamically display text in the desired language and regional format.

Setting date format

The Scheduler supports all valid date formats. By default, it uses the format "MM/dd/yyyy". If dateFormat is not specified, the format is derived from the current locale. With the default locale "en-US", the pattern is "MM/dd/yyyy".

Setting time format

Time format controls how time values display in the Scheduler. By default, the format (12-hour or 24-hour) is based on the current locale. The default "en-US" locale uses 12-hour format. Override it using the timeFormat property to display 24-hour format or other valid time formats.

timeFormat accepts only valid time format patterns.

First day of the week

Set the starting day of the week using the firstDayOfWeek property. Days map as: Sunday = 0, Monday = 1, Tuesday = 2, and so on.

Displaying Scheduler in RTL mode

Enable right-to-left layout by wrapping your app with Provider from @syncfusion/react-base and setting dir={'rtl'}. The Scheduler UI automatically flips to RTL conventions.