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日期范围选择器的输入框和时间列表

本页内容