i18n 插件
i18n 插件提供多语言和本地化支持。默认情况下,Day Flow 核心库仅包含英文 (en-US) 语言包,以保持最小的包体积。
安装
安装多语言插件包:
npm install @dayflow/plugin-localization
使用方法
要启用其他语言支持,请注册插件并提供所需的语言对象。locale 属性既支持传入语言代码字符串(如 'zh-CN'),也支持直接传入导入的 Locale 对象(如 zh)。
import { useCalendarApp, DayFlowCalendar } from '@dayflow/react';
import {
createLocalizationPlugin,
zh,
ja,
fr,
} from '@dayflow/plugin-localization';
function MyCalendar() {
const calendar = useCalendarApp({
views: [
/* 视图 */
],
plugins: [
createLocalizationPlugin({
locales: [zh, ja, fr], // 注册需要的语言包
}),
],
locale: zh, // 设置当前语言(支持传入 zh 对象,或语言代码字符串 'zh-CN')
});
return <DayFlowCalendar calendar={calendar} />;
}配置项
该插件接受一个 Locale 对象列表,用于注册到全局语言注册表中。
interface LocalizationConfig {
locales: Locale[];
}可用的语言包
@dayflow/plugin-localization 包含以下语言包:
| 导出名称 | 语言 | 语言代码 |
|---|---|---|
zh | 中文 | zh-CN |
ja | 日语 | ja-JP |
ko | 韩语 | ko-KR |
fr | 法语 | fr-FR |
de | 德语 | de-DE |
es | 西班牙语 | es-ES |
fa | 波斯语 | fa-IR |
en | 英语 | en-US (核心库已内置) |
设置 locale 属性时,你可以传递:
Locale对象:直接传入导入的语言包对象(如locale: zh)。- 语言代码字符串:传入语言代码(如
locale: 'zh-CN'或'zh'),它会自动在已注册的语言包中进行匹配。
自定义语言包
你也可以不使用插件直接注册自定义语言包,或者通过插件传入它们:
const myCustomLocale = {
code: 'pt-BR',
messages: {
today: 'Hoje',
day: 'Dia',
week: 'Semana',
month: 'Mês',
// ... 其他所有翻译键值
},
};
const calendar = useCalendarApp({
plugins: [
createLocalizationPlugin({
locales: [myCustomLocale],
}),
],
locale: myCustomLocale, // 可以直接传入自定义 Locale 对象(或语言代码 'pt-BR')
});无障碍标签
语言包的 messages 同时提供读屏软件为纯图标按钮和无标签输入框朗读的名称,请与可见文案一起翻译。自定义语言包中缺失的 key 会回退为英文。
| Key | 用途 |
|---|---|
previousDay / nextDay | 日视图头部的导航箭头 |
previousWeek / nextWeek | 周视图头部的导航箭头 |
previousMonth / nextMonth | 月视图头部、迷你日历和日期范围选择器的箭头 |
previousYear / nextYear | 年视图头部和日期范围选择器的箭头 |
previousPeriod / nextPeriod | 日程(Agenda)视图头部的导航箭头 |
clearSearch / closeSearch | 搜索框清空按钮和移动端搜索返回按钮 |
close | 对话框和抽屉的关闭按钮 |
startDate / endDate / hour / minute | 日期范围选择器的输入框和时间列表 |