Localizing Gantt

By default, all labels in Gantt are defined in English, but you can provide custom translations for:

  • actions (edit, delete);
  • labels of the buttons;
  • confirmation messages,

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.

Locale Structure

Gantt titles are stored in the following object:

export default {
  Edit: "Edit",
  Done: "Done",
  "Delete task": "Delete task",
  "The task will be deleted permanently, are you sure?":
    "The task 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",
  "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",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

  • 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": "Добавить проект",
};
  • Define the current locale for Gantt. For these purposes, set the locale property of Gantt in its constructor:
// use custom scrolls, optional
if (!webix.env.touch && webix.env.scrollSize) 
  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

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

  • First, set custom translations to the desired labels:
gantt.locales.ru = {  // Russian
  Edit: "Править", ...
};
 
gantt.locales.zh = {  // Chinese
  Edit: "编辑", ...
};
  • 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

How to Synchronize Gantt and Webix Locale

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"
    }
  }
}
Back to top