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 | 範囲ピッカーの入力欄と時刻リスト |