By default, all labels in Gantt are defined in English, but you can provide custom translations for:
The Gantt widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.
Gantt titles are stored in the following object:
export default {
Edit: "Edit",
Done: "Done",
"Delete task": "Delete task",
"Delete link": "Delete link",
"The task will be deleted permanently, are you sure?":
"The task will be deleted permanently, are you sure?",
"The link will be deleted permanently, are you sure?":
"The link will be deleted permanently, are you sure?",
Predecessors: "Predecessors",
Successors: "Successors",
Title: "Title",
"Start date": "Start date",
"End date": "End date",
Duration: "Duration",
Progress: "Progress",
Notes: "Notes",
Type: "Type",
Project: "Project",
Milestone: "Milestone",
"Add task": "Add task",
"Add project": "Add project",
"(no title)": "(no title)",
"Save changes?": "Save changes?",
"Related tasks": "Related tasks",
Task: "Task",
Link: "Link",
"End to start": "End to start",
"Start to start": "Start to start",
"End to end": "End to end",
"Start to end": "Start to end",
Lasts: "Lasts",
day: "day",
days: "days",
"Add assignment": "Add assignment",
Assignment: "Assignment",
Assignments: "Assignments",
Assigned: "Assigned",
"Delete assignment": "Delete assignment",
"Are you sure to delete this assignment?":
"Are you sure to delete this assignment?",
"No resources to add": "No resources to add",
Unassigned: "Unassigned",
hour: "h",
"Hours per": "Hours per",
"Tasks per": "Tasks per",
Name: "Name",
Hours: "Hours",
Tasks: "Tasks",
month: "month",
week: "week",
quarter: "quarter",
year: "year",
"Split task": "Split task",
"Planned dates": "Planned dates",
"Planned dates will be removed, are you sure?":
"Planned dates will be removed, are you sure?",
"Add dates": "Add dates",
"Remove dates": "Remove dates",
};
To change the default locale, you need to perform the following steps:
1. Set custom translations by creating the needed locale (below it is "ru") within the gantt.locales object:
// Russian translations
gantt.locales.ru = {
"Add task": "Добавить задачу",
"Add project": "Добавить проект",
};
2. Define the current locale for Gantt. For these purposes, set the locale property of Gantt in its constructor:
// use custom scrolls, optional
webix.CustomScroll.init();
webix.ui({
view: "gantt",
locale: {
lang: "ru",
webix: {
// switch all webix widgets to the selected locale
ru: "ru-RU"
},
},
url:"https://docs.webix.com/gantt-backend/"
});
Related sample: Gantt: Custom Locale
You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.
1. First, set custom translations to the desired labels:
gantt.locales.ru = { // Russian
Edit: "Править", ...
};
gantt.locales.zh = { // Chinese
Edit: "编辑", ...
};
2. Switch between languages using Gantt "locale" service and its setLang method:
{
view: "segmented",
options: ["en", "ru", "zh"],
width: 250,
click: function() {
const locale = $$("myGantt").getService("locale");
locale.setLang(this.getValue());
}
}
Related sample: Gantt: Switching Locales
The built-in labels of Webix components within the Gantt, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Gantt and Webix, define webix parameter in the locale setting of the Gantt constructor:
{
view:"gantt",
url:"https://docs.webix.com/gantt-backend/",
locale: {
lang: "en",
webix: {
// switch Webix the selected locale
en: "en-US",
zh: "zh-CN"
}
}
}