Skip to main content

DHTMLX Kanban. Localization example

When your application serves users across different regions, the Kanban UI labels (toolbar buttons, editor fields, date formats) need to match the user's language. Built-in locale packs let you switch the interface language at runtime without reinitializing the board.

Live example​

const { Kanban, Toolbar } = kanban;
const labels = ["EN", "DE", "CN", "ES", "FR", "IT", "JP", "PT", "RU"];

let current = 0;

const board = new Kanban("#root", {
    columns,
    cards,
    cardShape: {
		label: true,
		menu: true,
		start_date: true,
		end_date: true,
	},
});
const toolbar = new Toolbar("#toolbar", { api: board.api });

function changeLocale() {
    current = ++current % labels.length;
    const lang = labels[current].toLowerCase();
    board.setLocale(kanban.locales[lang]);
    toolbar.setLocale(kanban.locales[lang]);

    document.querySelector("#label").innerHTML = labels[current];
}
<!-- custom styles -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">

<div class="g-wrap" style="height: 100%;">
    <div class="dhx_sample-controls">
        <span class="dhx_sample-label" id="label">EN</span>
        <button class="dhx_sample-btn dhx_sample-btn--cta" id="change_locale" onclick="changeLocale()">Change locale</button>
    </div>
    <!-- Kanban toolbar -->
    <div id="toolbar"></div>
    <!-- Kanban container -->
    <div id="root" style="height: calc(100% - 56px);"></div>
</div>

<!-- dataset -->

<script>
const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];

	const cards = [
		{
			label: "Integration with Angular/React",
			column: "backlog",
		},
		{
			label: "Archive the cards/boards ",
			column: "backlog",
		},
		{
			label: "Searching and filtering",
			column: "backlog",
		},
		{
			label: "Set the tasks priorities",
			column: "inprogress",
		},
		{
			label: "Custom icons",
			column: "inprogress",
		},
		{
			label: "Integration with Gantt",
			column: "inprogress",
		},
		{
			label: "Drag and drop",
			column: "testing",
		},
		{
			label: "Adding images",
			column: "testing",
		},
		{
			label: "Create cards and lists from the UI and from code",
			column: "done",
		},
		{
			label: "Draw swimlanes",
			column: "done",
		},
		{
			label: "Progress bar",
			column: "done",
		},
	];
</script>

The demo cycles through nine built-in locales (EN, DE, CN, ES, FR, IT, JP, PT, RU) using setLocale. Both the Kanban board and the Toolbar have their own setLocale method, and both must be updated to keep the UI consistent. The locale objects are accessed from kanban.locales by lowercase language code.

Solution overview​

  1. Initialize the board and toolbar as usual
  2. Call board.setLocale(kanban.locales[lang]) to switch the board language
  3. Call toolbar.setLocale(kanban.locales[lang]) to switch the toolbar language
  4. Both calls are needed. They are independent components

Key points​

  • Both components need locale updates: The Kanban and Toolbar maintain separate locale state. Updating one does not affect the other
  • Nine built-in locales: EN, DE, CN, ES, FR, IT, JP, PT, RU are included out of the box
  • Custom locales: You can create your own locale object following the same structure as the built-in ones
  • No reinitialization needed: setLocale re-renders the UI in place without losing board state

API reference​

  • setLocale: Switches the Kanban interface language
  • locales: Built-in locale packs

Additional resources​