Localizing ToDo

By default, all labels in ToDo are defined in English, but you can provide custom translations.

The ToDo 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

ToDo titles are stored in the following object:

export default {
    "Add task below": "Add task below",
    "Add subtask": "Add subtask",
    Indent: "Indent",
    Unindent: "Unindent",
    "Set due date": "Set due date",
    "Assign to": "Assign to",
    "Move to": "Move to",
    Duplicate: "Duplicate",
    Copy: "Copy",
    Paste: "Paste",
    Delete: "Delete",
    "Add project": "Add project",
    "Rename project": "Rename project",
    "Delete project": "Delete project",
 
    "No project": "No project",
    "Add task": "Add task",
    "New project": "New project",
    "Enter a description": "Enter a description",
    Search: "Search",
 
    Show: "Show",
    all: "all",
    active: "active",
    completed: "completed",
};

Specifying Custom Locale

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 todo.locales object:

// Russian translations
todo.locales.ru = {
    "Add task": "Добавить задачу",
    "New project": "Новый проект",
  ...
};

2. Define the current locale for ToDo. For these purposes, set the locale property of ToDo in its constructor:

webix.ui({
    view: "todo",
    locale: {
        lang: "ru"
    },
    ...
 });

Related sample: ToDo: Custom Locale

How to Switch Locales at Runtime

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

1. First, set custom translations to the desired labels:

todo.locales.ru = { // Russian
    "Add task": "Добавить задачу",
    "New project": "Новый проект",
  ...
};
 
todo.locales.zh = {  // Chinese
    "Add task": "添加任務",
    "New project": "新項目",
  ...
};

2. Switch between languages using ToDo "locale" service and its setLang method:

{
  rows: [
    {
      view: "segmented", options: ["en", "ru", "zh"],
      click: function() {
        const locale = $$("um1").getService("locale");
        locale.setLang(this.getValue()); // zh, ru or en
      }
    },
    { view:"todo", id:"d1" }
  ]
}

Related sample: ToDo: Switching Locales

How to Synchronize ToDo and Webix Locale

The built-in labels of Webix components within the ToDo, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of ToDo and Webix, define webix parameter in the locale setting of the ToDo constructor:

{
    view:"todo",
    ...
    locale: {
      lang: "en",
      webix: {
        // switch Webix the selected locale
        en: "en-US",
        zh: "zh-CN"
      }
    }
}