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",
        Duration: "Duration",
        Task: "Task",
        Milestone: "Milestone",
        "Summary task": "Summary task",

        // Sidebar
        Save: "Save",
        Delete: "Delete",
        Name: "Name",
        Description: "Description",
        "Select type": "Select type",
        Type: "Type",
        "End date": "End date",
        Progress: "Progress",
        Predecessors: "Predecessors",
        Successors: "Successors",
        "Add task name": "Add task name",
        "Add description": "Add description",
        "Select link type": "Select link type",
        "End-to-start": "End-to-start",
        "Start-to-start": "Start-to-start",
        "End-to-end": "End-to-end",
        "Start-to-end": "Start-to-end",

        // 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 task": "Split task",

        // Toolbar
        "New task": "New task",
        "Move up": "Move up",
        "Move down": "Move down",
    },
};

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": "开始日期",
        Duration: "期间",
        Task: "任务",
        Milestone: "里程碑",
        "Summary task": "总结任务",

        // Sidebar
        Save: "保存",
        Delete: "删除",
        Name: "名称",
        Description: "描述",
        "Select type": "选择类型",
        Type: "类型",
        "End date": "结束日期",
        Progress: "进步",
        Predecessors: "前辈",
        Successors: "后继者",
        "Add task name": "添加任务名称",
        "Add description": "添加描述",
        "Select link type": "选择链接类型",
        "End-to-start": "结束开始",
        "Start-to-start": "开始开始",
        "End-to-end": "端到端",
        "Start-to-end": "开始到结束",

        // Context menu / toolbar
        Add: "添加",
        "Child task": "子任务",
        "Task above": "上面的任务",
        "Task below": "下面的任务",
        "Convert to": "转变",
        Edit: "编辑",
        Cut: "切",
        Copy: "复制",
        Paste: "粘贴",
        Move: "移动",
        Up: "向上",
        Down: "下",
        Indent: "缩进",
        Outdent: "凹痕",
        "Split task": "拆分任务",

        // Toolbar
        "New task": "新任务",
        "Move up": "提升",
        "Move down": "下移",
    },
};

Applying locales

To apply a built-in locale, import the Locale component from "@svar-ui/react-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/gantt-locales", and then pass the combined translations to the words prop of the Locale component.

Example:

import { Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/gantt-locales";
import { cn as cnCore } from "@svar-ui/core-locales";

<Locale words={{ ...cn, ...cnCore }}>
  {/* your app goes here */}
</Locale>

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: Locales