IgbDatePicker – ポップアップカレンダーの月と曜日を日本語化する

2022年5月現在、IgbDatePicker でポップアップ表示されるカレンダーの表示は、そのままでは日本語表記になりません。
このカレンダーの表示 (月名と曜日) を日本語表記にするには、以下の実装が必要となります。

日本語表記を掲載した JSON ファイルを用意

まず、IgbDatePicker のカレンダーの表示機構に合わせた、月および曜日の日本語表記を記載した JSON 形式のテキストファイルを用意します。
ファイル名は任意ですが、特に Blazor WebAssembly の場合は、ブラウザ側から読み取れる場所に配置する必要があります。
ここではファイル名は “date-picker.ja.json” とし、配置先は Blazor WebAssembly での利用例では ?wwwroot/resources フォルダに、Blazor Server での利用例では ?Resources フォルダに配置することとします。
下記に “date-picker.json” の一部を示します (完全なサンプルはさらに下に掲載のサンプルコードから入手いただけます)。

{

  "April_Full": "4月",
  "April_Short": "4月",
  "August_Full": "8月",
  "August_Short": "8月",
  "December_Full": "12月",
  "December_Short": "12月",
  "February_Full": "2月",
  "February_Short": "2月",
  "Friday_Full": "金曜日",
  "Friday_Short": "金曜",
  "Friday_Single": "金",

(以下省略)

日本語表記 JSON ファイルの内容を、IgbDatePicker に設定する

IgbDatePicker を使用するページ (Razor コンポーネント) の初回表示のタイミングで、先に用意した日本語表記の JSON ファイルの内容を、IgdDatePicker に対し、SetCustomizedStringAsync() メソッドを使って設定します。

Blazor WebAssembly と Blazor Server とで、実装はほぼ同じですが、日本語表記 JSON ファイルの内容の読み取り方が少し異なります。
以下の実装例を参照ください。

Blazor WebAssembly における実装例

@page "/"
@inject HttpClient Http
...
<IgbDatePicker @ref="_DatePicker" .../>
...
@code
{
    private IgbDatePicker _DatePicker;

    // このページ (Razor コンポーネント) の初回表示のタイミングで、
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 用意しておいた日本語表記 JSON ファイルの内容を、
            // HTTP 要求でサーバー側から取得し、
            var jpnJsonText = await Http.GetStringAsync(
                                        "resources/date-picker.ja.json");

            // 読み取った JSON 文字列を IgbDatePicker に設定。
            await DatePicker.SetCustomizedStringAsync("en", jpnJsonText);
        }
    }
    ...

Blazor Server における実装例

@page "/"
@inject IWebHostEnvironment HostEnv
...
<IgbDatePicker @ref="_DatePicker" .../>
...
@code
{
    private IgbDatePicker _DatePicker;

    // このページ (Razor コンポーネント) の初回表示のタイミングで、
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 用意しておいた日本語表記 JSON ファイルの内容を、
            // コンテンツファイルプロバイダー経由で読み取り、
            var jsonFile = HostEnv.ContentRootFileProvider.GetFileInfo(
                                          "Resources/date-picker.ja.json");
            using var jsonFileStream = jsonFile.CreateReadStream();
            using var jsonFileReader = new StreamReader(jsonFileStream);
            var jpnJsonText = await jsonFileReader.ReadToEndAsync();

            // 読み取った JSON 文字列を IgbDatePicker に設定。
            await DatePicker.SetCustomizedStringAsync("en", jpnJsonText);
        }
    }
    ...

以上の実装で、IgbDatePicker のカレンダー上、月と曜日の表示が日本語化されます (下図参照)。

2022年5月現在の制約

2022年5月現在、カレンダー部分に表示される年と月の左右の並び順を変更することはできません。

サンプル