Localization

You can easily localize Kanban by providing the correct translation for all text labels.

The Kanban widget package includes only the en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

It's possible to localize the following properties:

  • text on editor buttons and labels
  • card action options

The labels of Kanban buttons and menu items are stored in the webix.i18n.kanban object:

webix.i18n.kanban = {
    "copy" : "Copy",
    "dnd" : "Drop Files Here",
    "remove" : "Remove",
    "save" : "Save",
    "confirm":"The card will be deleted permanently, are you sure?",
    "editor":{
        "add" : "Add card",
        "assign" : "Assign to",
        "attachments" : "Attachments",
        "color" : "Color",
        "head" : "Editor",
        "status" : "Status",
        "tags" : "Tags",
        "text" : "Text",
        "upload" : "Upload"
    },
    "menu":{
        "copy": "Copy",
        "edit": "Edit",
        "remove": "Remove"
    }
};

To apply a custom locale, you can follow one of the two ways:

1) hard-code the translated labels according to your locale in the webix.i18n.kanban object;

2) provide translations to the desired Webix locale:

  • include translated labels and tooltips into the needed Webix locale as webix.i18n.locales[localeName].kanban object:
webix.i18n.locales["ru-RU"].kanban = {
    "copy" : "Копировать",
    "dnd" : "Бросайте файлы сюда",
    "remove" : "Удалить",
    "save" : "Сохранить",
    "confirm" : "Вы собираетесь навсегда удалить эту карточку. Вы уверены?",
    "editor":{
        "add" : "Добавить карточку",
        "assign" : "Назначить",
        "attachments" : "Вложения",
        "color" : "Цвет",
        "head" : "Редактор",
        "status" : "Статус",
        "tags" : "Метки",
        "text" : "Текст",
        "upload" : "Загрузить"
    },
    "menu":{
        "copy": "Копировать",
        "edit": "Редактировать",
        "remove": "Удалить"
    }
};
  • apply the created locale with the help of the setLocale method:
webix.i18n.setLocale("ru-RU");

The second way is more flexible.

Back to top
If you have not checked yet, be sure to visit site of our main product Webix html5 framework and page of web kanban product.