Global local in React Gantt component

26 Sep 202424 minutes to read

Localization

The Localization library allows you to localize default text content of the Gantt.The Gantt component has static text on some features (like column headers, add and edit dialog, tooltip, toolbar, etc.)that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
locale value and translation object.

The following list of properties and its values are used in the Gantt.

Locale key words Text
emptyRecord No records to display
id ID
name Name
startDate Start Date
endDate End Date
duration Duration
progress Progress
dependency Dependency
notes Notes
baselineStartDate Baseline Start Date
baselineEndDate Baseline End Date
type Type
offset Offset
resourceName Resources
resourceID Resource ID
day day
hour hour
minute minute
days days
hours hours
minutes minutes
generalTab General
customTab Custom Columns
writeNotes Write Notes
addDialogTitle New Task
editDialogTitle Task Information
add Add
edit Edit
update Update
delete Delete
cancel Cancel
search Search
task task
tasks tasks
zoomIn Zoom in
zoomOut Zoom out
zoomToFit Zoom to fit
expandAll Expand all
collapseAll Collapse all
nextTimeSpan Next timespan
prevTimeSpan Previous timespan
saveButton Save
taskBeforePredecessor_FS You moved “{0}” to start before “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FS You moved “{0}” away from “{1}” and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_SS You moved “{0}” to start before “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_SS You moved “{0}” to start after “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_FF You moved “{0}” to finish before “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FF You moved “{0}” to finish after “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_SF You moved “{0}” away from “{1}” to starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_SF You moved “{0}” to finish after “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
okText Ok
confirmDelete Are you sure you want to Delete Record?
from From
to To
taskLink Task Link
lag Lag
start Start
finish Finish
enterValue Enter the value
taskInformation Task Information
deleteTask Delete Task
deleteDependency Delete Dependency
convert Convert
save Save
above Above
below Below
child Child
milestone Milestone
toTask To Task
toMilestone To Milestone
eventMarkers Event markers
leftTaskLabel Left task label
rightTaskLabel Right task label
timelineCell Timeline cell
confirmPredecessorDelete Are you sure you want to remove dependency link?
taskMode Task Mode
changeScheduleMode Change Schedule Mode
subTasksStartDate SubTasks Start Date
subTasksEndDate SubTasks End Date
scheduleStartDate Schedule Start Date
scheduleEndDate Schedule End Date
auto Auto
manual Manual
excelExport Excel export
csvExport CSV export
pdfExport Pdf export
unit Unit
work Work
taskType Task Type
unassignedTask Unassigned Task
group Group
FF FF
FS FS
SF SF
SS SS

Loading translations

To load translation object in an application use load function of L10n class.

The below example demonstrates the Gantt in Deutsch culture.

import { L10n, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
        "id": "Ich würde",
        "name": "Name",
        "startDate": "Anfangsdatum",
        "duration": "Dauer",
        "progress": "Fortschritt",
     }
  }
});

function App () {
    const taskFields= {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentId'
    };
    return (
        <GanttComponent 
            dataSource={data} 
            locale='de-DE' 
            allowSelection={true} 
            taskFields={taskFields}  
            height = '450px'
        >
        </GanttComponent>
    ); 
};
ReactDOM.render(<App />, document.getElementById('root'));
import { L10n, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
        "id": "Ich würde",
        "name": "Name",
        "startDate": "Anfangsdatum",
        "duration": "Dauer",
        "progress": "Fortschritt",
     }
  }
});

function App () {
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentId'
    };
    return (
        <GanttComponent 
            dataSource={data} 
            locale='de-DE' 
            allowSelection={true} 
            taskFields={taskFields}  
            height = '450px'
        >
        </GanttComponent>
    ); 
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Internationalization

The Internationalization library is used to globalize number, date, and time values in gantt component.

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(cagregorian, numbers);
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
        "id": "Ich würde",
        "name": "Name",
        "startDate": "Anfangsdatum",
        "duration": "Dauer",
        "progress": "Fortschritt",
      }
  }
});

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'parentId'
  };
  return (
    <GanttComponent 
      dataSource={data} 
      locale='de-DE' 
      allowSelection={true} 
      taskFields={taskFields}  
      height = '450px'
    >
    </GanttComponent>
  ); 
};
ReactDOM.render(<App />, document.getElementById('root'));
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(cagregorian, numbers);
setCulture('de-DE');

L10n.load({
  'de-DE': {
    'gantt': {
        "id": "Ich würde",
        "name": "Name",
        "startDate": "Anfangsdatum",
        "duration": "Dauer",
        "progress": "Fortschritt",
      }
  }
});

function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'parentId'
  };
  return (
    <GanttComponent 
      dataSource={data} 
      locale='de-DE' 
      allowSelection={true} 
      taskFields={taskFields}  
      height = '450px'
    >
    </GanttComponent>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

  • In the above sample, Timeline is formatted by NumberFormatOptions and DateFormatOptions.
  • By default, locale value is en-US. If you want to change en-US culture, then set the locale.

Right to left (RTL)

RTL provides an option to switch the text direction and layout of the Gantt component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL Gantt, set the enableRtl to true.

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('ar-AE');

L10n.load({
    'ar-AE': {
        "gantt": {
            "emptyRecord": "لا سجلات لعرضها",
            "id": "هوية شخصية",
            "name": "اسم",
            "startDate": "تاريخ البدء",
            "endDate": "تاريخ الانتهاء",
            "duration": "المدة الزمنية",
            "progress": "تقدم",
            "dependency": "الاعتماد",
            "notes": "ملاحظات",
            "baselineStartDate": "تاريخ البدء الأساسي",
            "baselineEndDate": "تاريخ نهاية خط الأساس",
            "taskMode": "وضع المهام",
            "changeScheduleMode": "تغيير وضع الجدول",
            "subTasksStartDate": "تاريخ بدء المهام الفرعية",
            "subTasksEndDate": "تاريخ انتهاء المهام الفرعية",
            "scheduleStartDate": "جدولة تاريخ البدء",
            "scheduleEndDate": "تاريخ انتهاء الجدول الزمني",
            "auto": "تلقاءي",
            "manual": "كتيب",
            "type": "اكتب",
            "offset": "عوض",
            "resourceName": "مصادر",
            "resourceID": "معرف المورد",
            "day": "يوم",
            "hour": "ساعة",
            "minute": "دقيقة",
            "days": "أيام",
            "hours": "ساعات",
            "minutes": "الدقائق",
            "generalTab": "جنرال لواء",
            "customTab": "أعمدة مخصصة",
            "writeNotes": "اكتب ملاحظات",
            "addDialogTitle": "مهمة جديدة",
            "editDialogTitle": "معلومات المهمة",
            "saveButton": "حفظ",
            "add": "إضافة",
            "edit": "تعديل",
            "update": "تحديث",
            "delete": "حذف",
            "cancel": "إلغاء",
            "search": "بحث",
            "task": " مهمة",
            "tasks": " مهام",
            "zoomIn": "تكبير",
            "zoomOut": "تصغير",
            "zoomToFit": "تكبير لتناسب",
            "excelExport": "اكسل التصدير",
            "csvExport": "تصدير CSV",
            "expandAll": "توسيع الكل",
            "collapseAll": "انهيار جميع",
            "nextTimeSpan": "الجدول الزمني التالي",
            "prevTimeSpan": "الجدول الزمني السابق",
            "okText": "حسنا",
            "confirmDelete": "هل أنت متأكد أنك تريد حذف السجل؟",
            "from": "من عند",
            "to": "إلى",
            "taskLink": "رابط المهمة",
            "lag": "بطئ",
            "start": "بداية",
            "finish": "إنهاء",
            "enterValue": "أدخل القيمة",
            "taskBeforePredecessor_FS": "قمت بنقل '{0}' للبدء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FS": "قمت بنقل '{0}' بعيدًا عن '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SS": "قمت بنقل '{0}' للبدء قبل أن يبدأ '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SS": "قمت بنقل '{0}' للبدء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_FF": "قمت بنقل '{0}' للإنهاء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FF": "قمت بنقل '{0}' للإنهاء بعد انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SF": "قمت بنقل '{0}' بعيدًا عن '{1}' لبدء التشغيل وترتبط المهمتان. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SF": "قمت بنقل '{0}' للإنهاء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskInformation": "معلومات المهمة",
            "deleteTask": "حذف المهمة",
            "deleteDependency": "حذف التبعية",
            "convert": "تحويل",
            "save": "حفظ",
            "above": "في الاعلى",
            "below": "أدناه",
            "child": "طفل",
            "milestone": "معلما",
            "toTask": "لمهمة",
            "toMilestone": "إلى معلم",
            "eventMarkers": "علامات الحدث",
            "leftTaskLabel": "تسمية المهمة اليسرى",
            "rightTaskLabel": "تسمية المهمة الصحيحة",
            "timelineCell": "خلية الجدول الزمني",
            "confirmPredecessorDelete": "هل أنت متأكد أنك تريد إزالة رابط التبعية؟",
            "unit": "وحدة",
            "work": "عمل",
            "taskType": "نوع المهمة",
            "unassignedTask": "مهمة غير محددة",
            "group": "مجموعة",
            "indent": "مسافة بادئة",
            "outdent": "عفا عليها الزمن",
            "segments": "شرائح",
            "splitTask": "تقسيم المهمة",
            "mergeTask": "مهمة الدمج",
            "left": "اليسار",
            "right": "حق"
        }
    }
});

function App () {
    const taskFields = {
        id: 'TaskId',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentId'
    };
    return (
        <GanttComponent 
            dataSource={data} 
            locale='ar-AE' 
            allowSelection={true} 
            taskFields={taskFields} 
            enableRtl= {true} 
            height = '450px'
        >
        </GanttComponent>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('ar-AE');

L10n.load({
    'ar-AE': {
        "gantt": {
            "emptyRecord": "لا سجلات لعرضها",
            "id": "هوية شخصية",
            "name": "اسم",
            "startDate": "تاريخ البدء",
            "endDate": "تاريخ الانتهاء",
            "duration": "المدة الزمنية",
            "progress": "تقدم",
            "dependency": "الاعتماد",
            "notes": "ملاحظات",
            "baselineStartDate": "تاريخ البدء الأساسي",
            "baselineEndDate": "تاريخ نهاية خط الأساس",
            "taskMode": "وضع المهام",
            "changeScheduleMode": "تغيير وضع الجدول",
            "subTasksStartDate": "تاريخ بدء المهام الفرعية",
            "subTasksEndDate": "تاريخ انتهاء المهام الفرعية",
            "scheduleStartDate": "جدولة تاريخ البدء",
            "scheduleEndDate": "تاريخ انتهاء الجدول الزمني",
            "auto": "تلقاءي",
            "manual": "كتيب",
            "type": "اكتب",
            "offset": "عوض",
            "resourceName": "مصادر",
            "resourceID": "معرف المورد",
            "day": "يوم",
            "hour": "ساعة",
            "minute": "دقيقة",
            "days": "أيام",
            "hours": "ساعات",
            "minutes": "الدقائق",
            "generalTab": "جنرال لواء",
            "customTab": "أعمدة مخصصة",
            "writeNotes": "اكتب ملاحظات",
            "addDialogTitle": "مهمة جديدة",
            "editDialogTitle": "معلومات المهمة",
            "saveButton": "حفظ",
            "add": "إضافة",
            "edit": "تعديل",
            "update": "تحديث",
            "delete": "حذف",
            "cancel": "إلغاء",
            "search": "بحث",
            "task": " مهمة",
            "tasks": " مهام",
            "zoomIn": "تكبير",
            "zoomOut": "تصغير",
            "zoomToFit": "تكبير لتناسب",
            "excelExport": "اكسل التصدير",
            "csvExport": "تصدير CSV",
            "expandAll": "توسيع الكل",
            "collapseAll": "انهيار جميع",
            "nextTimeSpan": "الجدول الزمني التالي",
            "prevTimeSpan": "الجدول الزمني السابق",
            "okText": "حسنا",
            "confirmDelete": "هل أنت متأكد أنك تريد حذف السجل؟",
            "from": "من عند",
            "to": "إلى",
            "taskLink": "رابط المهمة",
            "lag": "بطئ",
            "start": "بداية",
            "finish": "إنهاء",
            "enterValue": "أدخل القيمة",
            "taskBeforePredecessor_FS": "قمت بنقل '{0}' للبدء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FS": "قمت بنقل '{0}' بعيدًا عن '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SS": "قمت بنقل '{0}' للبدء قبل أن يبدأ '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SS": "قمت بنقل '{0}' للبدء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_FF": "قمت بنقل '{0}' للإنهاء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FF": "قمت بنقل '{0}' للإنهاء بعد انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SF": "قمت بنقل '{0}' بعيدًا عن '{1}' لبدء التشغيل وترتبط المهمتان. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SF": "قمت بنقل '{0}' للإنهاء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskInformation": "معلومات المهمة",
            "deleteTask": "حذف المهمة",
            "deleteDependency": "حذف التبعية",
            "convert": "تحويل",
            "save": "حفظ",
            "above": "في الاعلى",
            "below": "أدناه",
            "child": "طفل",
            "milestone": "معلما",
            "toTask": "لمهمة",
            "toMilestone": "إلى معلم",
            "eventMarkers": "علامات الحدث",
            "leftTaskLabel": "تسمية المهمة اليسرى",
            "rightTaskLabel": "تسمية المهمة الصحيحة",
            "timelineCell": "خلية الجدول الزمني",
            "confirmPredecessorDelete": "هل أنت متأكد أنك تريد إزالة رابط التبعية؟",
            "unit": "وحدة",
            "work": "عمل",
            "taskType": "نوع المهمة",
            "unassignedTask": "مهمة غير محددة",
            "group": "مجموعة",
            "indent": "مسافة بادئة",
            "outdent": "عفا عليها الزمن",
            "segments": "شرائح",
            "splitTask": "تقسيم المهمة",
            "mergeTask": "مهمة الدمج",
            "left": "اليسار",
            "right": "حق"
        }
    }
});

function App () {
    const taskFields: any = {
        id: 'TaskId',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentId'
    };
    return (
        <GanttComponent 
            dataSource={data} 
            locale='ar-AE' 
            allowSelection={true} 
            taskFields={taskFields} 
            enableRtl= {true} 
            height = '450px'
        >
        </GanttComponent>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

See Also