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",
//Grid
grid: {
"Add before": "Add before",
"Add after": "Add after",
Copy: "Copy",
Delete: "Delete",
},
};
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",
// 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.
Example:
<script>
import { Locale } from "wx-svelte-core";
import { cn } from "wx-grid-locales";
import { cn as cnCore } from "wx-core-locales";
</script>
<Locale words={{ ...cn, ...cnCore }}>
To apply a locale to a control, you should:
- import the control together with the Locale object.
<script>
import { Locale, Calendar} from "wx-svelte-core";
import { cn } from "wx-grid-locales";
import { cn as cnCore } from "wx-core-locales";
</script>
- wrap the control you want to localize in the
<Locale>
tags and use thewords
property to set the language:
<Locale words={cn}>
<Calendar />
</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:
const ko = {
grid: {
Copy: "복사",
Delete: "삭제",
// other
},
calendar: { ... } // if needed
};