Could someone help identify what’s wrong with: Gantt?

[linda05]

How do I localize Smart Gantt labels and tooltips in a JavaScript application? The application must support multiple languages including Spanish and French.

[admin]

Hi,

Define Translations via messages

Smart.Gantt lets you override all UI text per locale:

const gantt = document.querySelector("smart-gantt");

gantt.messages = {
  en: {
    task: "Task",
    startDate: "Start Date",
    endDate: "End Date",
    duration: "Duration"
  },
  es: {
    task: "Tarea",
    startDate: "Fecha de inicio",
    endDate: "Fecha de fin",
    duration: "Duración"
  },
  fr: {
    task: "Tâche",
    startDate: "Date de début",
    endDate: "Date de fin",
    duration: "Durée"
  }
};

Set the Active Locale

gantt.locale = "es"; // Spanish

Use Messages in Columns (Labels)

Instead of hardcoding labels, pull from messages:

gantt.treeColumns = [
  { label: gantt.localize("task"), value: "label", size: "50%" },
  { label: gantt.localize("startDate"), value: "dateStart" },
  { label: gantt.localize("endDate"), value: "dateEnd" }
];

👉 localize(key) automatically uses the current locale.

4. Localize Tooltips

Smart.Gantt allows tooltip customization via templates or callbacks.

Example:

gantt.tooltipTemplate = function(task) {
  return 

${gantt.localize(“task”)}: ${task.label}
${gantt.localize(“startDate”)}: ${task.dateStart}
${gantt.localize(“endDate”)}: ${task.dateEnd}
`;
};

Localize Dates Properly (Important)

Smart.Gantt does not fully localize date formatting automatically in templates, so use the browser API:

function formatDate(date, locale) {
return new Intl.DateTimeFormat(locale).format(new Date(date));
}

gantt.tooltipTemplate = function(task) {
return `
${gantt.localize(“task”)}: ${task.label}
${gantt.localize(“startDate”)}: ${formatDate(task.dateStart, gantt.locale)}
${gantt.localize(“endDate”)}: ${formatDate(task.dateEnd, gantt.locale)}
`;
};`

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts