Hi everyone,
I’m having some issues when I try to add a custom localization to the Gantt component in Svelte. The scale labels (month/day names) are not being translated.
This is my custom JavaScript file (src/ptBR.js):
export const ptBR = {
// === calendar ===
calendar: {
monthFull: [
"Janeiro", "Fevereiro", "Março", "Abril",
"Maio", "Junho", "Julho", "Agosto",
"Setembro", "Outubro", "Novembro", "Dezembro"
],
monthShort: [
"jan", "fev", "mar", "abr",
"mai", "jun", "jul", "ago",
"set", "out", "nov", "dez"
],
dayFull: [
"domingo", "segunda-feira", "terça-feira", "quarta-feira",
"quinta-feira", "sexta-feira", "sábado"
],
dayShort: ["dom", "seg", "ter", "qua", "qui", "sex", "sáb"],
hours: "Horas",
minutes: "Minutos",
done: "Concluído",
clear: "Limpar",
today: "Hoje",
am: ["am", "AM"],
pm: ["pm", "PM"],
weekStart: 1, // segunda-feira
clockFormat: 24 // formato 24h
},
// === core ===
core: {
ok: "OK",
cancel: "Cancelar",
select: "Selecionar",
"No data": "Sem dados"
},
// === formats ===
formats: {
dateFormat: "%d/%m/%Y",
timeFormat: "%H:%i",
monthYearFormat: "%F %Y",
yearFormat: "%Y"
},
lang: "pt-BR",
// === gantt ===
gantt: {
// Header / sidebar
"Task name": "Nome da tarefa",
"Start date": "Data de início",
Duration: "Duração",
Task: "Tarefa",
Milestone: "Marco",
"Summary task": "Tarefa resumo",
// Sidebar fields
Save: "Salvar",
Delete: "Excluir",
Name: "Nome",
Description: "Descrição",
"Select type": "Selecione o tipo",
Type: "Tipo",
"End date": "Data de término",
Progress: "Progresso",
Predecessors: "Predecessores",
Successors: "Sucessores",
"Add task name": "Adicionar nome da tarefa",
"Add description": "Adicionar descrição",
"Select link type": "Selecione tipo de vínculo",
"End-to-start": "Término→Início",
"Start-to-start": "Início→Início",
"End-to-end": "Término→Término",
"Start-to-end": "Início→Término",
// Context menu / toolbar
Add: "Adicionar",
"Child task": "Tarefa filha",
"Task above": "Tarefa acima",
"Task below": "Tarefa abaixo",
"Convert to": "Converter para",
Edit: "Editar",
Cut: "Recortar",
Copy: "Copiar",
Paste: "Colar",
Move: "Mover",
Up: "Para cima",
Down: "Para baixo",
Indent: "Recuar",
Outdent: "Desfazer recuo",
"Split task": "Dividir tarefa",
// Toolbar buttons
"New task": "Nova tarefa",
"Move up": "Mover para cima",
"Move down": "Mover para baixo"
}
};
And this is my App.svelte:
<script>
import { Gantt, Willow } from 'wx-svelte-gantt';
import { onMount } from 'svelte';
import { Locale } from 'wx-svelte-core';
import { ptBR } from './locales/ptBR.js';
const tasks = [
{ id: 20, text: "New Task", start: new Date(2025, 4, 1), end: new Date(2025, 4, 2), duration: 1, progress: 2, type: "task", lazy: false },
{ id: 47, text: "[1] Master project", start: new Date(2025, 4, 2), end: new Date(2025, 4, 3), duration: 8, progress: 0, parent: 0, type: "summary" },
{ id: 22, text: "Task", start: new Date(2025, 4, 1), end: new Date(2025, 4, 2), duration: 8, progress: 0, parent: 47, type: "task" },
{ id: 21, text: "New Task 2", start: new Date(2025, 4, 1), end: new Date(2025, 4, 2), duration: 3, progress: 0, type: "task" }
];
const links = [{ id: 1, source: 20, target: 21, type: "s2s" }];
const scales = [
{ unit: "month", step: 1, format: "MMM yyyy" },
{ unit: "day", step: 2, format: "d" }
];
function handleTaskUpdate(e) {
console.log("Task updated:", e.detail);
}
function handleLinkAdd(e) {
console.log("Link added:", e.detail);
}
</script>
<svelte:head>
<title>Gantt</title>
</svelte:head>
<div style="height:100vh; width:100vw;">
<Locale words={ptBR}>
<Willow>
<Gantt
{tasks}
{links}
{scales}
on:updateTask={handleTaskUpdate}
on:linkAdd={handleLinkAdd}
style="height: 100vh; width: 100%;"
/>
</Willow>
</Locale>
</div>
With this code, I’m able to translate almost everything in the Gantt component, but the scale labels are not being affected by the localization. Is there a workaround, or did I do something wrong in the config/imports of my custom locale?
I used the guides from Gantt and Core:
https://docs.svar.dev/svelte/core/guides/localization
https://docs.svar.dev/svelte/gantt/guides/localization
print
