Localization
The library provides two built-in locales:
- English
- Chinese
You can also apply a custom locale.
Default locale
The English locale is applied by default:
const en = {
//calendar
calendar: {
monthFull: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
monthShort: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
dayFull: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
hours: "Hours",
minutes: "Minutes",
done: "Done",
clear: "Clear",
today: "Today",
am: ["am", "AM"],
pm: ["pm", "PM"],
weekStart: 7,
clockFormat: 24
},
//core
core: {
ok:"OK",
cancel:"Cancel",
select: "Select",
"No data": "No data"
},
//formats
formats: {
dateFormat: "%d.%m.%Y",
timeFormat: "%H:%i"
},
lang: "en-US",
// Gantt
gantt: {
// Header / sidebar
"Task name": "Task name",
"Start date": "Start date",
"Add task": "Add task",
Duration: "Duration",
Task: "Task",
Milestone: "Milestone",
"Summary task": "Summary task",
Resources: "Resources",
WBS: "WBS",
Hours: "Hours",
Capacity: "Capacity",
// Sidebar
Save: "Save",
Delete: "Delete",
Name: "Name",
Description: "Description",
Type: "Type",
"End date": "End date",
Progress: "Progress",
Manual: "Manual",
Inactive: "Inactive",
"Skip resource calendars": "Skip resource calendars",
Predecessors: "Predecessors",
Successors: "Successors",
"Add task name": "Add task name",
"Add description": "Add description",
"End-to-start": "End-to-start",
"Start-to-start": "Start-to-start",
"End-to-end": "End-to-end",
"Start-to-end": "Start-to-end",
"No links": "No links",
"No assignments": "No assignments",
"No segments": "No segments",
"Add resource": "Add resource",
Resource: "Resource",
General: "General",
Scheduling: "Scheduling",
Deadline: "Deadline",
Constraint: "Constraint",
None: "None",
"Start no earlier than": "Start no earlier than",
"Start no later than": "Start no later than",
"Finish no earlier than": "Finish no earlier than",
"Finish no later than": "Finish no later than",
"Must start on": "Must start on",
"Must finish on": "Must finish on",
Links: "Links",
Lag: "Lag",
Segments: "Segments",
Ungrouped: "Ungrouped",
Unassigned: "Unassigned",
Unschedule: "Unschedule",
// Context menu / toolbar
Add: "Add",
"Child task": "Child task",
"Task above": "Task above",
"Task below": "Task below",
"Convert to": "Convert to",
Edit: "Edit",
Cut: "Cut",
Copy: "Copy",
Paste: "Paste",
Move: "Move",
Up: "Up",
Down: "Down",
Indent: "Indent",
Outdent: "Outdent",
Split: "Split",
Segment: "Segment",
// Toolbar
"New task": "New task",
"Move up": "Move up",
"Move down": "Move down",
Undo: "Undo",
Redo: "Redo",
// Formats
Week: "Week",
Q: "Quarter",
// Conflicts
Conflicts: "Conflicts",
"No conflicts found": "No conflicts found",
"Link violation": "Link violation",
"Constraint violation": "Constraint violation",
"From link": "From link",
"Remove link": "Remove link",
"Move task": "Move task",
"Remove constraint": "Remove constraint",
},
};
cn locale
const cn = {
// calendar
calendar: {
monthFull: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
monthShort: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
dayFull: [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
],
dayShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
hours: "小时",
minutes: "分钟",
done: "完成",
clear: "清除",
today: "今天",
am: ["", ""],
pm: ["", ""],
weekStart: 7,
clockFormat: 24,
},
//core
core: {
ok: "确定",
cancel: "取消",
select: "选择",
"No data": "没有数据"
},
// formats
formats: {
timeFormat: "%H:%i",
dateFormat: "%Y-%m-%d",
},
lang: "zh-CN",
// Gantt
gantt: {
// Header / sidebar
"Task name": "任务名称",
"Start date": "开始日期",
"Add task": "添加任务",
Duration: "期间",
Task: "任务",
Milestone: "里程碑",
"Summary task": "总结任务",
Resources: "资源",
WBS: "WBS",
Hours: "小时",
Capacity: "容量",
// Sidebar
Save: "保存",
Delete: "删除",
Name: "名称",
Description: "描述",
Type: "类型",
"End date": "结束日期",
Progress: "进步",
Manual: "手动",
Inactive: "未激活",
"Skip resource calendars": "忽略资源日历",
Predecessors: "前辈",
Successors: "后继者",
"Add task name": "添加任务名称",
"Add description": "添加描述",
"End-to-start": "结束开始",
"Start-to-start": "开始开始",
"End-to-end": "端到端",
"Start-to-end": "开始到结束",
"No links": "无链接",
"No assignments": "无分配",
"No segments": "无分段",
"Add resource": "添加资源",
Resource: "资源",
General: "常规",
Scheduling: "排期",
Deadline: "截止日期",
Constraint: "约束",
None: "无",
"Start no earlier than": "不早于此日期开始",
"Start no later than": "不晚于此日期开始",
"Finish no earlier than": "不早于此日期完成",
"Finish no later than": "不晚于此日期完成",
"Must start on": "必须开始于",
"Must finish on": "必须完成于",
Links: "链接",
Lag: "滞后",
Segments: "任务段",
Ungrouped: "未分组",
Unassigned: "未分配",
Unschedule: "取消排程",
// Context menu / toolbar
Add: "添加",
"Child task": "子任务",
"Task above": "上面的任务",
"Task below": "下面的任务",
"Convert to": "转变",
Edit: "编辑",
Cut: "切",
Copy: "复制",
Paste: "粘贴",
Move: "移动",
Up: "向上",
Down: "下",
Indent: "缩进",
Outdent: "凹痕",
Split: "拆分",
Segment: "分段",
// Toolbar
"New task": "新任务",
"Move up": "提升",
"Move down": "下移",
Undo: "撤銷",
Redo: "重做",
// Formats
Week: "星期",
Q: "季度",
// Conflicts
Conflicts: "冲突",
"No conflicts found": "未发现冲突",
"Link violation": "链接冲突",
"Constraint violation": "约束冲突",
"From link": "来自链接",
"Remove link": "删除链接",
"Move task": "移动任务",
"Remove constraint": "删除约束",
},
};
Applying locales
To apply a built-in locale, import the Locale object from "@svar-ui/svelte-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/gantt-locales", and then add the words attribute for the required language to the Locale tag.
Example:
import { Locale } from "@svar-ui/svelte-core";
import { cn } from "@svar-ui/gantt-locales";
import { cn as cnCore } from "@svar-ui/core-locales";
<Locale words={{ ...cn, ...cnCore }}>
To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Gantt text labels (it can be any language you need). You also need to add labels from the core and calendar components ("@svar-ui/core-locales"). Refer to Core localization for more details.
Example for the Korean language:
const ko = {
gantt: {
// Header / sidebar
"Task name": "이름",
"Start date": "시작일",
Duration: "지속",
// other
},
core:{ ... },
calendar: { ... }
};
Related sample: