Globalization in React Gantt component

18 May 2022 / 5 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
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

Loading translations

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

The below example demonstrates the Gantt in Deutsch culture.

Source

Preview

index.jsx

index.html

index.tsx

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'));

Internationalization

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