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',
child: 'subtasks'
};
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',
child: 'subtasks'
};
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/27.2.2/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.jsx';
import * as numbers from './numbers.jsx';
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',
child: 'subtasks'
};
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.tsx';
import * as numbers from './numbers.tsx';
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',
child: 'subtasks'
};
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/27.2.2/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>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',
child: 'subtasks'
};
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',
child: 'subtasks'
};
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/27.2.2/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>