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 = {
    lang: "en-US",

    //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",
        monthYearFormat: "%F %Y",
        yearFormat: "%Y",
    },

    //Grid
    grid: {
        "Add before": "Add before",
        "Add after": "Add after",
        Copy: "Copy",
        Delete: "Delete",
    },
};

cn locale

const cn = {
    lang: "zh-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",
        monthYearFormat: "%F %Y",
        yearFormat: "%Y",
    },

    // Grid
    grid: {
        "Add before": "添加之前",
        "Add after": "添加在之后",
        Copy: "复制",
        Delete: "删除",
    },
};

Applying locales

To apply a built-in locale, import the Locale object from "wx-svelte-core", the locale package from "wx-core-locales", and a built-in locale from "wx-grid-locales", and then add the words attribute for the required language to the Locale tag. Then, wrap Grid into the Locale tag.

Example:

<script>
    import { Locale } from "wx-svelte-core";
    import { cn } from "wx-grid-locales";
    import { cn as cnCore } from "wx-core-locales";
    import { Grid } from "wx-svelte-grid";
</script>

<Locale words={{ ...cn, ...cnCore }}>
    <Grid {data} {columns}/>
</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 Grid text labels (it can be any language you need), and then follow the instructions from above to apply the locale.

Example for the Korean language:

<script>
    import { Locale } from "wx-svelte-core";
    import { Grid } from "wx-svelte-grid";

    const ko = {
        grid: {
            Copy: "복사",
            Delete: "삭제",
            // other
        },
        calendar: { ... } // if needed 
        //other
    };
</script>

<Locale words={{ ko }}>
    <Grid {data} {columns}/>
</Locale>