i18n プラグイン

i18n プラグインは、多言語およびローカライズのサポートを提供します。デフォルトでは、Day Flow のコアライブラリはバンドルサイズを最小限に抑えるため、英語 (en-US) ののみが含まれています。

インストール

ローカライズプラグインパッケージをインストールします:

npm install @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} />;
}

設定

プラグインは、グローバルロケールレジストリに登録する 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: 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')を渡せます
});

アクセシブルラベル

ロケールの messages は、アイコンのみのボタンやラベルのない入力欄をスクリーンリーダーが読み上げる名前にも使われます。表示テキストと一緒に翻訳してください。カスタムロケールに無いキーは英語にフォールバックします。

キー用途
previousDay / nextDay日ビューのヘッダーの移動ボタン
previousWeek / nextWeek週ビューのヘッダーの移動ボタン
previousMonth / nextMonth月ビューのヘッダー、ミニカレンダー、範囲ピッカーの移動ボタン
previousYear / nextYear年ビューのヘッダーと範囲ピッカーの移動ボタン
previousPeriod / nextPeriodアジェンダビューのヘッダーの移動ボタン
clearSearch / closeSearch検索のクリアボタンとモバイル検索の戻るボタン
closeダイアログとドロワーの閉じるボタン
startDate / endDate / hour / minute範囲ピッカーの入力欄と時刻リスト

目次