i18n 插件

i18n 插件提供多语言和本地化支持。默认情况下，Day Flow 核心库仅包含英文 (en-US) 语言包，以保持最小的包体积。

安装

安装多语言插件包：

npm install @dayflow/plugin-localization

pnpm add @dayflow/plugin-localization

yarn add @dayflow/plugin-localization

bun add @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} />;
}

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import {
  createLocalizationPlugin,
  zh,
  ja,
  fr,
} from '@dayflow/plugin-localization';

const calendar = useCalendarApp({
  views: [
    /* 视图 */
  ],
  plugins: [
    createLocalizationPlugin({
      locales: [zh, ja, fr], // 注册需要的语言包
    }),
  ],
  locale: zh, // 设置当前语言（支持传入 zh 对象，或语言代码字符串 'zh-CN'）
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import {
  createLocalizationPlugin,
  zh,
  ja,
  fr,
} from '@dayflow/plugin-localization';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `<dayflow-calendar [calendar]="calendar"></dayflow-calendar>`
})
export class AppComponent {
  calendar = {
    views: [
      /* 视图 */
    ],
    plugins: [
      createLocalizationPlugin({
        locales: [zh, ja, fr], // 注册需要的语言包
      })
    ],
    locale: zh, // 设置当前语言（支持传入 zh 对象，或语言代码字符串 'zh-CN'）
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import {
    createLocalizationPlugin,
    zh,
    ja,
    fr,
  } from '@dayflow/plugin-localization';

  const calendar = useCalendarApp({
    views: [
      /* 视图 */
    ],
    plugins: [
      createLocalizationPlugin({
        locales: [zh, ja, fr], // 注册需要的语言包
      }),
    ],
    locale: zh, // 设置当前语言（支持传入 zh 对象，或语言代码字符串 'zh-CN'）
  });
</script>

<DayFlowCalendar {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`
`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'）
});

i18n 插件

安装

使用方法

配置项

可用的语言包

自定义语言包

On this page