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 |
changeScheduleMode | Change Schedule Mode |
subTasksStartDate | SubTasks Start Date |
subTasksEndDate | SubTasks End Date |
scheduleStartDate | Schedule Start Date |
scheduleEndDate | Schedule End Date |
auto | Auto |
manual | Manual |
zoomToFit | Zoom to fit |
excelExport | Excel export |
csvExport | CSV export |
pdfExport | Pdf export |
unit | Unit |
work | Work |
taskType | Task Type |
unassignedTask | Unassigned Task |
group | Group |
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 } 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",
}
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
}
render() {
return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.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/20.1.55/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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",
}
}
});
class App extends React.Component<{}, {}> {
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
render() {
return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));
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 } 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",
}
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
}
render() {
return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.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/20.1.55/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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",
}
}
});
class App extends React.Component<{}, {}> {
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
render() {
return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));