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 プロパティには、ロケールコード文字列（例：'ja-JP'）またはインポートした Locale オブジェクト直接（例：ja）のいずれかを指定できます。

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: ja, // 現在のロケールを設定（ja オブジェクト直接、または文字列 'ja-JP' を指定）
  });

  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: ja, // 現在のロケールを設定（ja オブジェクト直接、または文字列 'ja-JP' を指定）
});
</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: ja, // 現在のロケールを設定（ja オブジェクト直接、または文字列 'ja-JP' を指定）
  };
}

<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: ja, // 現在のロケールを設定（ja オブジェクト直接、または文字列 'ja-JP' を指定）
  });
</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: ja）。
ロケールコード文字列：ロケールコード文字列を渡します（例：locale: 'ja-JP' または 'ja'）。登録済みのロケールから自動的に一致するものを探します。

カスタムロケール

プラグインを使用せずに、またはプラグインに渡すことで、独自のカスタムロケールを登録することもできます：

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