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",
    },
};

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 add the words prop for the required language to 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 */}
</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: { ... }
};