syncfusion-blazor-calendars

Syncfusion Blazor カレンダーの実装

カレンダー

Calendar コンポーネントは、柔軟な日付選択、複数のビュー（月／年／10年）、日付範囲の制約、ローカライズ、アクセシビリティへの準拠を提供する、軽量で機能豊富な日付選択コンポーネントです。日付選択、カレンダー表示、または日付ベースの UI 操作を実装する必要がある場合は、いつでもこのスキルを使用してください。

このスキルを使用するタイミング

次の場合にこのスキルを使用してください：

• 日付ピッカー、カレンダーウィジェット、または日付選択インターフェイスを構築する
• 日付範囲の制約（最小／最大日付）を追加する
• 複数月表示や、ドリルダウン形式の日付選択（年／10年ビュー）を実装する
• 日付値の変更やイベントを処理する
• カレンダーのスタイルを設定する、または外観をカスタマイズする
• 国際的な日付形式や RTL レイアウトに対応する
• キーボード操作に対応した、アクセシブルなカレンダーインターフェイスを作成する

関連コンポーネント：

• DatePicker（カレンダードロップダウン付きの日付入力）
• DateRangePicker（日付範囲の選択）
• DateTimePicker（日付と時刻の選択）
• Scheduler（複雑な日付ベースのスケジュール管理）

コンポーネントの概要

機能	詳細
ビュー	Month（既定）、Year、Decade - 階層的なドリルダウン操作
選択	単一の日付、日付範囲（最小／最大）、複数選択
データ型	DateTime、DateTime?、DateOnly（.NET 6+）
バインディング	一方向、双方向（@bind-Value）、動的
イベント	ValueChange、OnRenderDayCell、Created、Destroyed、Navigated
ローカライズ	多言語、RTL 対応、ロケールのカスタマイズ
アクセシビリティ	WCAG 2.2 AA、キーボード操作、スクリーンリーダー対応
スタイル設定	CSS のカスタマイズ、テーマとの統合、特別な日付の強調表示

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージ
• Web アプリと Server アプリのセットアップ
• Blazor の名前空間とサービス登録
• 基本的なカレンダーの実装
• 最小／最大日付の制約

カレンダーのビューとナビゲーション

📄 参照： references/calendar-views.md

• Month、Year、Decade ビュー
• Start および Depth プロパティ
• ビューの制限とドリルダウン操作
• 日付選択の深さの制限

日付選択とデータバインディング

📄 参照： references/date-selection-binding.md

• Value プロパティと日付バインディング
• 一方向バインディングと双方向バインディング（@bind-Value）
• DateOnly のサポート（.NET 6+）
• 動的な値の変更
• 日付範囲の制約

イベントと操作

📄 参照： references/events-handling.md

• ValueChange イベント（日付の選択）
• Selected／DeSelected イベント（複数選択）
• OnRenderDayCell イベント（カスタム描画）
• Created および Destroyed ライフサイクルイベント
• Navigated イベント（ビューの変更）
• イベント引数とリアクティブパターン
• CalendarEvents 子コンポーネントの使用

スタイル設定とカスタマイズ

📄 参照： references/styling-appearance.md

• CSS カスタマイズのパターン
• 背景色、枠線、ホバー状態
• 日付セルのスタイル設定
• ヘッダーとタイトルのカスタマイズ
• Today ボタンと選択した日付のスタイル設定
• 特別な日付の強調表示

ローカライズとグローバリゼーション

📄 参照： references/localization-globalization.md

• ロケールのサポートと言語ファイル
• 右から左（RTL）のレイアウト
• イスラム暦とカスタムカレンダー
• 週のカスタマイズ（週の初日）
• 日付形式のローカライズ

アクセシビリティとキーボード操作

📄 参照： references/accessibility.md

• WCAG 2.2 AA への準拠
• スクリーンリーダーのサポート（WAI-ARIA）
• キーボード操作のショートカット
• フォーカス管理と ARIA 属性

高度な機能とパターン

📄 参照： references/advanced-features.md

• 他の月の日付の表示／非表示
• カスタムセルのレンダリングパターン
• 複数の日付選択
• 週番号の表示
• パフォーマンスの最適化
• 一般的な統合パターン

クイックスタートの例

@using Syncfusion.Blazor.Calendars


<SfCalendar TValue="DateTime?" Value="@SelectedDate"></SfCalendar>


<SfCalendar TValue="DateTime?" 
    Value="@SelectedDate" 
    Min="@MinDate" 
    Max="@MaxDate">
</SfCalendar>


<SfCalendar TValue="DateTime?" @bind-Value="@SelectedDate">
    <CalendarEvents TValue="DateTime?" ValueChange="@OnDateChanged"></CalendarEvents>
</SfCalendar>


<SfCalendar TValue="DateTime?" 
    IsMultiSelection="true"
    @bind-Values="@SelectedDates">
    <CalendarEvents TValue="DateTime?" 
        Selected="@OnDateSelected"
        DeSelected="@OnDateDeselected">
    </CalendarEvents>
</SfCalendar>

@code {
    public DateTime? SelectedDate { get; set; } = DateTime.Now;
    public DateTime[] SelectedDates { get; set; } = new DateTime[] { };

    private void OnDateChanged(ChangedEventArgs<DateTime?> args)
    {
        SelectedDate = args.Value;
        // Handle date change
    }
    
    private void OnDateSelected(SelectedEventArgs<DateTime?> args)
    {
        // Handle date added to selection
    }
    
    private void OnDateDeselected(DeSelectedEventArgs<DateTime?> args)
    {
        // Handle date removed from selection
    }
}

一般的なパターン

パターン 1：日付範囲の選択

Min と Max の境界を定義して、ユーザーが選択できる範囲を制限します：

<SfCalendar TValue="DateTime?" Value="@SelectedDate" 
    Min="@MinDate" Max="@MaxDate"></SfCalendar>

パターン 2：双方向データバインディング

Calendar をコンポーネントの状態と同期させます：

<p>Selected: @SelectedDate</p>
<SfCalendar TValue="DateTime?" @bind-Value="@SelectedDate"></SfCalendar>

パターン 3：カスタムセルのレンダリング

レンダリング時に特定の日付セルを強調表示またはカスタマイズします：

<SfCalendar TValue="DateTime?">
    <CalendarEvents TValue="DateTime?" OnRenderDayCell="@CustomizeCell"></CalendarEvents>
</SfCalendar>

パターン 4：ビューの制限

特定のビュー階層（例：年 → 月のみ）にナビゲーションを制限します：

<SfCalendar TValue="DateTime?" 
    Start="CalendarView.Year" 
    Depth="CalendarView.Month"></SfCalendar>

パターン 5：ローカライズ

特定の言語／地域設定でカレンダーを表示します：

<SfCalendar TValue="DateTime?" EnableRtl="false"></SfCalendar>

主なプロパティと用途

プロパティ	型	目的	例
Value	TValue	選択した日付（単方向バインディング）	Value="@SelectedDate"
@bind-Value	TValue	双方向データバインディング	@bind-Value="@SelectedDate"
Values	DateTime[]	選択した複数の日付（複数選択モード）	Values="@SelectedDates"
@bind-Values	DateTime[]	複数選択の双方向バインディング	@bind-Values="@SelectedDates"
IsMultiSelection	bool	複数の日付選択を有効にする	IsMultiSelection="true"
Min	DateTime	選択可能な最も古い日付（境界を含む）	Min="@minSelectableDate"
Max	DateTime	選択可能な最も新しい日付（境界を含む）	Max="@maxSelectableDate"
Start	CalendarView	初期ビュー（Month/Year/Decade）	Start="CalendarView.Year"
Depth	CalendarView	ドリルダウン可能な最下層のビュー	Depth="CalendarView.Month"
ShowTodayButton	bool	フッターに「今日」ボタンを表示する	ShowTodayButton="true"
CalendarMode	CalendarType	暦体系（グレゴリオ暦／イスラム暦）	CalendarMode="CalendarType.Islamic"
WeekRule	CalendarWeekRule	週番号の計算規則	WeekRule="CalendarWeekRule.FirstDay"
DayHeaderFormat	DayHeaderFormats	曜日ヘッダーの表示形式	DayHeaderFormat="DayHeaderFormats.Short"
EnableRtl	bool	右から左へのレイアウト	EnableRtl="true"
WeekNumber	bool	カレンダーに週番号を表示する	WeekNumber="true"
FirstDayOfWeek	int	週の開始曜日（0=日曜日、1=月曜日）	FirstDayOfWeek="1"
CssClass	string	スタイル設定用のカスタム CSS クラス	CssClass="custom-calendar"
Enabled	bool	コンポーネントを有効／無効にする	Enabled="false"

一般的なユースケース

1. 予約受付：日付範囲（利用可能な日）とイベント処理を備えたカレンダー
2. 日付フィルター：特定の日付までドリルダウンできる複数ビューのカレンダー
3. 期限の選択：有効な日付範囲に対する Min／Max の制約
4. レポートの表示：期間を選択するための年／月ビュー
5. 国際対応アプリ：多言語 UI のための RTL とロケールのサポート
6. アクセシブルなフォーム：キーボードで操作でき、スクリーンリーダーをサポートする日付入力

イベントの使用

すべてのカレンダーコンポーネントでは、イベントハンドラーを宣言するために子イベントコンポーネントを使用します。この方法により、型安全性が確保され、関心事が明確に分離されます。

子イベントコンポーネント

• Calendar：子コンポーネント <CalendarEvents> を使用します
• DatePicker：子コンポーネント <DatePickerEvents> を使用します
• DateRangePicker：子コンポーネント <DateRangePickerEvents> を使用します
• DateTimePicker：子コンポーネント <DateTimePickerEvents> を使用します
• TimePicker：子コンポーネント <TimePickerEvents> を使用します

例：イベントを備えた Calendar

<SfCalendar TValue="DateTime?" @bind-Value="@SelectedDate">
    <CalendarEvents TValue="DateTime?" 
        ValueChange="@OnValueChanged"
        OnRenderDayCell="@OnDayCellRender"
        Navigated="@OnNavigated">
    </CalendarEvents>
</SfCalendar>

@code {
    private DateTime? SelectedDate { get; set; }
    
    private void OnValueChanged(ChangedEventArgs<DateTime?> args)
    {
        Console.WriteLine($"Date changed: {args.Value}");
    }
    
    private void OnDayCellRender(RenderDayCellEventArgs args)
    {
        // Disable weekends
        if (args.Date.DayOfWeek == DayOfWeek.Saturday || args.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            args.IsDisabled = true;
        }
    }
    
    private void OnNavigated(NavigatedEventArgs args)
    {
        Console.WriteLine($"Navigated to: {args.View}");
    }
}

一般的なイベントパターン

パターン 1：検証を伴う値の変更

<SfDatePicker TValue="DateTime?" @bind-Value="@OrderDate">
    <DatePickerEvents TValue="DateTime?" ValueChange="@ValidateAndUpdate"></DatePickerEvents>
</SfDatePicker>

@code {
    private DateTime? OrderDate { get; set; }
    
    private void ValidateAndUpdate(ChangedEventArgs<DateTime?> args)
    {
        if (args.Value.HasValue && args.Value.Value > DateTime.Now.AddMonths(6))
        {
            // Show error - date too far in future
            OrderDate = DateTime.Now;
        }
        else
        {
            OrderDate = args.Value;
        }
    }
}

パターン 2：ポップアップのライフサイクル管理

<SfDateTimePicker TValue="DateTime?" @bind-Value="@AppointmentTime">
    <DateTimePickerEvents TValue="DateTime?" 
        OnOpen="@HandlePopupOpen"
        OnClose="@HandlePopupClose">
    </DateTimePickerEvents>
</SfDateTimePicker>

@code {
    private DateTime? AppointmentTime { get; set; }
    
    private void HandlePopupOpen(PopupObjectArgs args)
    {
        Console.WriteLine("Popup opened");
        // Can cancel opening: args.Cancel = true;
    }
    
    private void HandlePopupClose(PopupObjectArgs args)
    {
        Console.WriteLine("Popup closed");
    }
}

パターン 3：カスタムセルのレンダリング

<SfCalendar TValue="DateTime?" @bind-Value="@EventDate">
    <CalendarEvents TValue="DateTime?" OnRenderDayCell="@CustomizeCells"></CalendarEvents>
</SfCalendar>

@code {
    private DateTime? EventDate { get; set; }
    private List<DateTime> EventDates = new List<DateTime> 
    { 
        DateTime.Now.AddDays(5),
        DateTime.Now.AddDays(10)
    };
    
    private void CustomizeCells(RenderDayCellEventArgs args)
    {
        // Highlight event dates
        if (EventDates.Any(d => d.Date == args.Date.Date))
        {
            args.CellData.ClassList = "e-special-date";
        }
    }
}

イベント引数型リファレンス

重要： コンポーネントによって、ValueChange イベントに使用するイベント引数型が異なります。

コンポーネント	ValueChange イベント引数型	備考
Calendar	ChangedEventArgs<TValue>	単一日付および複数日付の選択に使用します
DatePicker	ChangedEventArgs<TValue>	Value、IsInteracted、Event プロパティを含みます
DateTimePicker	ChangedEventArgs<TValue>	DatePicker と同じです
TimePicker	ChangeEventArgs<TValue>	注意：クラス名が異なります（「d」はありません）
DateRangePicker	RangePickerEventArgs<TValue>	StartDate と EndDate プロパティを含みます

主な違い：

• ChangedEventArgs<TValue>（「d」あり） - Calendar、DatePicker、DateTimePicker で使用します
  • プロパティ：Value、Values（複数選択用）、IsInteracted、Event、Element、Name
• ChangeEventArgs<TValue>（「d」なし） - TimePicker のみで使用します
  • プロパティ：Value、Text、IsInteracted、Event、Element
• RangePickerEventArgs<TValue> - DateRangePicker のみで使用します
  • プロパティ：StartDate、EndDate、Text、Value、IsInteracted、Event、Element

---

DatePicker

DatePicker コンポーネントを実装し、カスタマイズするための包括的なスキルです。このスキルを使用すると、Blazor Server、Blazor WebAssembly、Blazor Web App の各プロジェクトで DatePicker をインストール、構成、統合できます。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• あらゆる種類の Blazor プロジェクトに Syncfusion DatePicker をインストールしてセットアップする
• 入力検証を使用した基本的な日付選択を実装する
• 一方向および双方向のデータバインディングを構成する
• カスタムの日付形式と入力形式を設定する
• 日付範囲の制約（最小／最大日付）を適用する
• 特別な日付を強調表示または無効化する
• DatePicker のイベント（ValueChange、OnClose、Focus、Blur）を処理する
• コンポーネントをグローバル化およびローカライズする（さまざまな言語／カレンダー）
• Islamic Calendar やその他の暦体系をサポートする
• DatePicker で DateOnly（.NET 6 以降）を使用する
• 外観をスタイル設定してカスタマイズする（読み取り専用、無効状態、テーマ）
• キーボード操作とアクセシビリティを実装する
• データバインディング、書式設定、イベントの問題をトラブルシューティングする
• Blazor Server と WebAssembly でパフォーマンスを最適化する
• 日付選択をフォームや API と統合する

コンポーネントの概要

DatePicker コンポーネントは、ユーザーが単一の日付を選択できる直感的なカレンダー UI を提供します。次の機能をサポートします。

• 複数の入力方法： 直接入力、カレンダーピッカー、またはその両方
• 日付の制約： 最小／最大日付の範囲、無効化する日付、特別なハイライト
• 柔軟な書式設定： カスタムの表示形式と入力形式
• グローバルサポート： 複数の言語、カレンダー（グレゴリオ暦、イスラム暦）、RTL
• アクセシビリティ： WCAG 準拠、キーボード操作、スクリーンリーダーのサポート
• イベントシステム： 値の変更、ポップアップの開閉、フォーカス／ブラーイベント
• テーマのサポート： Bootstrap、Material、Fluent、Tailwind CSS

インストールのクイックスタート

1. NuGet パッケージをインストールする

dotnet add package Syncfusion.Blazor.Calendars
dotnet add package Syncfusion.Blazor.Themes

2. _Imports.razor にインポートする

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars

3. Program.cs に登録する

builder.Services.AddSyncfusionBlazor();

4. App.razor またはレイアウトにテーマを追加する

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. コンポーネントで使用する

<SfDatePicker TValue="DateTime?" @bind-Value="@selectedDate">
    <DatePickerEvents TValue="DateTime?" ValueChange="@OnDateChange"></DatePickerEvents>
</SfDatePicker>

@code {
    DateTime? selectedDate = new DateTime(2026, 3, 18);
    
    void OnDateChange(ChangedEventArgs<DateTime?> args)
    {
        selectedDate = args.Value;
    }
}

ドキュメントのナビゲーションガイド

タスクに応じて、参考資料を選んでください。

はじめに

📄 参照： references/getting-started.md

• Blazor Server、WebAssembly、Web App へのインストール
• NuGet パッケージのセットアップ
• テーマの構成
• サービスの登録
• DatePicker の基本的な例

データバインディング

📄 参照： references/data-binding.md

• Value プロパティによる一方向バインディング
• @bind-Value による双方向バインディング
• 動的な値の更新と null の処理
• DateTime と DateTime? へのバインディング

日付形式と入力

📄 参照： references/date-formats-and-input.md

• 表示形式のカスタマイズ（d/M/yyyy、dd/MM/yyyy など）
• 入力形式のパターン
• プレースホルダーテキストの設定
• 形式の解析と検証
• カスタム形式の例

日付範囲と制約

📄 参照： references/date-range-and-constraints.md

• 最小日付／最大日付の制限
• 特定の日付を無効化
• 特別な日付の強調表示
• 日付の検証ロジック
• 無効な選択の防止

イベントと操作

📄 参照： references/events.md

• ValueChange イベントの処理
• OnOpen／OnClose イベント（ポップアップのライフサイクル）
• Selected イベント（カレンダーでの日付選択）
• Focus／Blur イベント
• Cleared イベント（クリアボタンのクリック）
• Created／Destroyed ライフサイクルイベント
• Navigated イベント（カレンダービューの移動）
• OnRenderDayCell イベント（日付セルのカスタムレンダリング）
• DatePickerEvents 子コンポーネントの使用

高度な機能

📄 参照： references/advanced-features.md

• イスラム暦のサポート
• DateOnly（.NET 6+）のサポート
• グローバル化とローカライズ
• 週番号の表示
• さまざまな表示モード
• マスクのサポートと入力マスキング

スタイルと外観

📄 参照： references/styling-and-appearance.md

• CSS のカスタマイズとテーマ
• 読み取り専用状態のスタイル設定
• 無効状態のスタイル設定
• RTL（右から左）サポート
• テーマの切り替え（Bootstrap、Material、Fluent、Tailwind）
• カスタムスタイルの例

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 への準拠
• キーボード操作（矢印キー、Enter、Escape）
• ARIA 属性とロール
• スクリーンリーダーのサポート
• 色のコントラストと視覚的なインジケーター
• フォーカス管理

サーバーと WebAssembly の比較

📄 参照： references/server-vs-webassembly.md

• Blazor Server と WebAssembly の違い
• Blazor Web App（.NET 8+）のセットアップ
• レンダーモード（InteractiveServer、InteractiveWebAssembly）
• パフォーマンスに関する考慮事項
• イベントのインタラクティブ性

トラブルシューティング

📄 参照： references/troubleshooting.md

• データバインディングの問題
• 日付形式の問題
• イベント処理の問題
• スタイルとレイアウトの問題
• パフォーマンスの最適化
• よくあるエラーメッセージと解決方法

よくあるパターン

パターン 1：基本的な日付選択

<SfDatePicker TValue="DateTime?" Value="@selectedDate" 
              Placeholder="Select a date"></SfDatePicker>

用途：フォーム入力にシンプルで標準的な日付ピッカーが必要な場合。

パターン 2：制約付きの日付範囲

<SfDatePicker TValue="DateTime?" Value="@selectedDate"
              Min="@minDate" Max="@maxDate"></SfDatePicker>

用途：日付を特定の範囲内に限定する必要がある場合（例：未来の日付のみ、イベントの日付）。

パターン 3：双方向バインディング

<SfDatePicker TValue="DateTime?" @bind-Value="@formData.BirthDate"></SfDatePicker>

用途：DatePicker によって親コンポーネントの状態やフォームデータを自動更新する必要がある場合。

パターン 4：イベント駆動型ロジック

<SfDatePicker TValue="DateTime?">
    <DatePickerEvents TValue="DateTime?" ValueChange="@OnDateSelected"></DatePickerEvents>
</SfDatePicker>

@code {
    void OnDateSelected(ChangedEventArgs<DateTime?> args)
    {
        // Trigger calculations, API calls, or validation
    }
}

用途：選択によってワークフロー、計算、または依存する値の更新を実行する場合。

パターン 5：カスタム入力による書式設定済み表示

<SfDatePicker TValue="DateTime?" Value="@selectedDate"
              Format="dd/MM/yyyy" Placeholder="DD/MM/YYYY"></SfDatePicker>

用途：日付表示を地域やビジネスの要件に合わせる必要がある場合。

主なプロパティ

プロパティ	型	目的
Value	TValue	選択した日付（一方向バインド）
@bind-Value	TValue	双方向データバインディング
Min	DateTime	選択可能な最も早い日付
Max	DateTime	選択可能な最も遅い日付
Format	string	表示形式のパターン（例：「dd/MM/yyyy」）
Placeholder	string	入力欄のプレースホルダーテキスト
AllowEdit	bool	テキストを手動で入力・編集できるようにする
StrictMode	bool	有効な日付のみを許可する
EnableMask	bool	日付入力の入力マスクを有効にする
OpenOnFocus	bool	入力欄にフォーカスしたときにカレンダーのポップアップを開く
FloatLabelType	FloatLabelType	フローティングラベルの動作（Auto/Always/Never）
InputFormats	string[]	入力可能な形式の配列
Enabled	bool	コンポーネントを有効／無効にする
Readonly	bool	読み取り専用モード（ユーザー入力なし）
ShowClearButton	bool	値をリセットするクリアボタンを表示する
WeekNumber	bool	カレンダーに週番号を表示する
Start	CalendarView	初期カレンダービュー（Month/Year/Decade）
Depth	CalendarView	許可される最も深い表示レベル
ZIndex	int	ポップアップの配置に使用する Z-index
Width	string	コンポーネントの幅（例：「300px」）
CssClass	string	スタイル設定用のカスタム CSS クラス

パフォーマンスのヒント

1. DateTime?（null 許容型）を使用して任意の日付フィールドを扱います。既定の日付との混同を避けられます
2. モーダルや展開可能なセクションでは DatePicker を遅延読み込みし、初期レンダリングのコストを削減します
3. イベントハンドラー内での形式変換を最小限に抑え、可能な場合は書式設定済みの文字列をキャッシュします
4. 日付を多用する UI では InteractiveWebAssembly を使用し、処理をクライアントに委ねます
5. ループ内で値の更新をまとめて行い、ValueChange のトリガーによる頻繁な再レンダリングを避けます

---

DateRangePicker

DateRangePicker コンポーネントを実装およびカスタマイズするための包括的なスキルです。このコンポーネントを使うと、ユーザーはカレンダーピッカーで日付範囲を選択できます。範囲の制約、カスタマイズ、アクセシビリティ、グローバル化のための機能を備えています。

このスキルを使用する場面

次のことが必要な場合に、このスキルを使用します。

• Blazor アプリケーションに DateRangePicker コンポーネントをインストールして設定する
• 日付範囲を選択するインターフェイスを作成する
• 日付の最小値と最大値の制約を設定する
• コンポーネントの値をデータモデルにバインドする
• プレースホルダーテキスト、週の最初の曜日、外観をカスタマイズする
• キーボード操作とアクセシビリティ機能を実装する
• コンポーネントのイベント（変更、ぼかし、フォーカスなど）を処理する
• さまざまなカルチャ向けにグローバル化とローカライズを設定する
• .NET 6 以降のプロジェクトで DateOnly 型をサポートする
• 入力欄のクリック時またはプログラムからポップアップを開く
• カレンダーに週番号を表示する
• カスタム CSS スタイルとテーマを適用する
• RTL（右から左）表記の言語に対応する
• DateRangePicker のよくある問題をデバッグする

コンポーネントの概要

SfDateRangePicker は、ユーザーが連続した日付範囲を選択できる、カレンダーベースの入力コンポーネントです。主な特徴は次のとおりです。

• 2 つのカレンダー表示：日付範囲を簡単に選択できるよう、2 か月分のカレンダーを表示します
• 範囲の制約：Min/Max プロパティで日付の範囲を制限します
• 柔軟なデータバインディング：DateTime、DateTime?、DateOnly 型に対応します
• カスタマイズ可能：週の最初の曜日、プレースホルダー、ポップアップの動作、スタイルを設定できます
• アクセシブル：キーボード操作に対応し、WCAG 2.2 AA に完全準拠しています
• グローバル化対応：複数のカルチャ、RTL、日付形式をサポートします
• イベント駆動型：ユーザー操作に対応する包括的なイベントシステムを備えています
• モバイルフレンドリー：タッチ操作に最適化されたカレンダーインターフェイスです

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージによるインストール
• 名前空間のインポートとサービスの登録
• 基本的なコンポーネントの設定（WebAssembly アプリと Server アプリ）
• テーマのスタイルシートの追加
• Min/Max の日付制約の設定
• 最初の DateRangePicker のレンダリング

範囲選択とデータバインディング

📄 参照： references/range-selection.md

• 単一日付選択と範囲日付選択のモード
• @bind を使用した双方向データバインディング
• プログラムによる範囲の更新
• 日付選択のクリア
• .NET 6+ での DateOnly 型の使用
• 値変更の処理

カスタマイズとスタイル設定

📄 参照： references/customization-and-styling.md

• 週の開始曜日の設定
• プレースホルダーテキストの設定
• カスタム CSS クラスの適用
• 入力欄のクリック時にポップアップを開く
• 週番号の表示
• 外観とビジュアルのカスタマイズ
• テーマとの統合

データとグローバリゼーション

📄 参照： references/data-and-globalization.md

• データバインディングのパターンとベストプラクティス
• DateOnly 型のサポートと使用方法
• グローバリゼーションの設定
• 文化圏に応じた日付書式
• 右から左に記述する（RTL）言語のサポート
• 国際的な利用者向けのローカライズ

イベントとインタラクション

📄 参照： references/events-and-interactions.md

• ValueChange イベント（範囲選択の完了）
• RangeSelected イベント（個々の日付の選択）
• OnOpen／OnClose イベント（ポップアップのライフサイクル）
• Focus／Blur イベント
• Cleared イベント（クリアボタンのクリック）
• Created／Destroyed ライフサイクルイベント
• Navigated イベント（カレンダービューの移動）
• OnRenderDayCell イベント（日付セルのカスタム描画）
• DateRangePickerEvents 子コンポーネントの使用
• イベント引数の型（RangePickerEventArgs）

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2 AA 準拠の概要
• キーボード操作のショートカット
• カレンダーの月移動キー
• ARIA 属性とスクリーンリーダーのサポート
• モバイルデバイスのアクセシビリティ機能
• アクセシビリティのテストと検証

クイックスタート

基本的な DateRangePicker

@using Syncfusion.Blazor.Calendars

<SfDateRangePicker TValue="DateTime?" Placeholder="Select a date range"></SfDateRangePicker>

日付制約を設定する場合

<SfDateRangePicker TValue="DateTime?" 
    Placeholder="Choose a range" 
    Min="@MinDate" 
    Max="@MaxDate">
</SfDateRangePicker>

@code {
    public DateTime MinDate { get; set; } = new DateTime(2024, 1, 1);
    public DateTime MaxDate { get; set; } = new DateTime(2024, 12, 31);
}

データバインディングを使用する場合（StartDate／EndDate）

<SfDateRangePicker TValue="DateTime?" 
    @bind-StartDate="StartDate" 
    @bind-EndDate="EndDate">
</SfDateRangePicker>

@code {
    private DateTime? StartDate { get; set; }
    private DateTime? EndDate { get; set; }
}

範囲制約を設定する場合

<SfDateRangePicker TValue="DateTime?" 
    MinDays="3" 
    MaxDays="30"
    @bind-StartDate="StartDate" 
    @bind-EndDate="EndDate">
</SfDateRangePicker>

@code {
    // User must select range between 3 and 30 days
    private DateTime? StartDate { get; set; }
    private DateTime? EndDate { get; set; }
}

プリセット範囲を使用する場合

<SfDateRangePicker TValue="DateTime?">
    <DateRangePickerPresets>
        <DateRangePickerPreset Label="Last 7 Days" Start="@last7DaysStart" End="@currentDate"></DateRangePickerPreset>
        <DateRangePickerPreset Label="Last 30 Days" Start="@last30DaysStart" End="@currentDate"></DateRangePickerPreset>
        <DateRangePickerPreset Label="This Month" Start="@currentMonthStart" End="@currentDate"></DateRangePickerPreset>
    </DateRangePickerPresets>
</SfDateRangePicker>

@code {
    private DateTime currentDate = DateTime.Now;
    private DateTime last7DaysStart = DateTime.Now.AddDays(-7);
    private DateTime last30DaysStart = DateTime.Now.AddDays(-30);
    private DateTime currentMonthStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
}

主なプロパティ

プロパティ	型	用途
StartDate	TValue	範囲の開始日（単方向バインディング）
@bind-StartDate	TValue	開始日の双方向バインディング
EndDate	TValue	範囲の終了日（単方向バインディング）
@bind-EndDate	TValue	終了日の双方向バインディング
Value	Object	範囲をまとめた値（レガシー）
Min	DateTime	選択可能な最も早い日付
Max	DateTime	選択可能な最も遅い日付
MinDays	int?	範囲内で必要な最小日数
MaxDays	int?	範囲内で許容される最大日数
Presets	List<Presets>	事前定義された日付範囲のプリセット
Separator	string	開始日と終了日の区切り文字（既定値：「-」）
Format	string	表示書式パターン
Placeholder	string	入力欄のプレースホルダーテキスト
AllowEdit	bool	テキストの手入力を許可
StrictMode	bool	有効な日付のみを許可
OpenOnFocus	bool	入力欄にフォーカスしたときにポップアップを開く
FloatLabelType	FloatLabelType	フローティングラベルの動作
Enabled	bool	コンポーネントの有効／無効
Readonly	bool	読み取り専用モード
ShowClearButton	bool	クリアボタンを表示
WeekNumber	bool	週番号を表示
FirstDayOfWeek	int	週の開始曜日（0=日曜日、1=月曜日）
ZIndex	int	ポップアップの Z-index
Width	string	コンポーネントの幅
CssClass	string	カスタム CSS クラス

よく使われるパターン

パターン 1：検証付きの範囲選択

<SfDateRangePicker TValue="DateTime?" 
    @bind-Value="BookingRange" 
    Min="@minBookingDate"
    Placeholder="Select booking dates">
</SfDateRangePicker>

@code {
    private DateTime? BookingRange { get; set; }
    private DateTime minBookingDate = DateTime.Today;
}

パターン 2：イベント処理

<SfDateRangePicker TValue="DateTime?" 
    @bind-StartDate="@StartDate"
    @bind-EndDate="@EndDate">
    <DateRangePickerEvents TValue="DateTime?" ValueChange="@OnDateRangeChange"></DateRangePickerEvents>
</SfDateRangePicker>

@code {
    private DateTime? StartDate { get; set; }
    private DateTime? EndDate { get; set; }
    
    private void OnDateRangeChange(RangePickerEventArgs<DateTime?> args)
    {
        // Handle date range selection
        Console.WriteLine($"Start: {args.StartDate}, End: {args.EndDate}");
    }
}

パターン 3：異なる制約を設定した複数のインスタンス

<div>
    <h4>Q1 Reporting Period (Jan-Mar)</h4>
    <SfDateRangePicker TValue="DateTime?" 
        Min="@new DateTime(2024, 1, 1)" 
        Max="@new DateTime(2024, 3, 31)"
        Placeholder="Select dates">
    </SfDateRangePicker>
</div>

<div>
    <h4>Q2 Reporting Period (Apr-Jun)</h4>
    <SfDateRangePicker TValue="DateTime?" 
        Min="@new DateTime(2024, 4, 1)" 
        Max="@new DateTime(2024, 6, 30)"
        Placeholder="Select dates">
    </SfDateRangePicker>
</div>

---

DateTimePicker

DateTimePicker コンポーネントの実装とカスタマイズに関する包括的なガイドです。DateTimePicker を使用すると、複数の形式、マスク、グローバリゼーション、豊富なカスタマイズオプションに対応しながら、日付と時刻の両方を選択できます。

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• Blazor アプリケーションに DateTimePicker コンポーネントをインストールして設定する
• 日付と時刻の選択機能を実装する
• カスタム書式文字列を使用して日付と時刻の値をフォーマットする
• 入力マスクを適用し、ユーザー入力を検証する
• DateTimePicker のイベント（ValueChange、OnOpen、OnClose など）を処理する
• コンポーネントをデータモデルにバインドする
• 日付と時刻の最小値および最大値の制約を設定する
• 特定の日付を強調表示する、または無効にする
• グローバリゼーション（RTL、複数のロケール）を実装する
• イスラム暦やその他の暦システムに対応する
• コンポーネントの外観とスタイルをカスタマイズする
• プレースホルダーテキストと入力検証を設定する
• 入力検証の厳密モードを有効にする
• カレンダーに週番号を表示する

ドキュメント

はじめに

📄 参照: references/getting-started.md

• インストールと NuGet パッケージの設定
• Blazor Server/Web App での基本的なコンポーネントの初期化
• 最小限の実用例
• 必要なインポートと設定

日付と時刻のフォーマット

📄 参照: references/date-time-formatting.md

• 書式文字列のパターンと標準形式
• カスタムの日付と時刻の書式設定
• ロケール固有のフォーマット
• 解析形式と表示形式の処理

データバインディングとイベント

📄 参照: references/data-binding-and-events.md

• 日付と時刻の値の双方向バインディング
• ValueChange イベント（日付と時刻の選択完了）
• OnOpen/OnClose イベント（ポップアップのライフサイクル）
• Selected イベント（カレンダーでの日付選択）
• OnItemRender イベント（時刻リスト項目のカスタム描画）
• Focus/Blur イベント
• Cleared イベント（クリアボタンのクリック）
• Created/Destroyed ライフサイクルイベント
• Navigated イベント（カレンダービューの移動）
• OnRenderDayCell イベント（日付セルのカスタム描画）
• DateTimePickerEvents 子コンポーネントの使用
• 状態管理とデータフローのパターン

日付範囲と特別な日付

📄 参照: references/date-ranges-and-special-dates.md

• 日付の最小値と最大値の制約を設定する
• 選択できる日付範囲を制限する
• 特別な日付を強調表示する
• 特定の日付や日付範囲を無効にする
• 週番号の設定

マスクと入力検証

📄 参照: references/masking-and-input-validation.md

• 日付と時刻の入力用マスクパターン
• プレースホルダーテキストの設定
• 入力検証ルール
• 厳密モードの適用と入力動作
• 検証時のエッジケース

カスタマイズとスタイル設定

📄 参照: references/customization-and-styling.md

• CSS のカスタマイズとクラスのオーバーライド
• テーマとの統合（Bootstrap、Material、Fluent、Tailwind）
• コンポーネントの外観とスタイル設定オプション
• カスタム CSS プロパティとスタイル設定パターン
• 外観のカスタマイズ例

グローバリゼーションとアクセシビリティ

📄 参照: references/globalization-and-accessibility.md

• グローバリゼーションへの対応（RTL、複数のロケール）
• イスラム暦の実装と設定
• アクセシビリティ機能（WCAG 準拠、キーボード操作）
• ARIA 属性とスクリーンリーダーへの対応
• 国際化のベストプラクティス

クイックスタート

DateTimePicker をすぐに使い始められる、最小限の実用例を紹介します。

@page "/datetimepicker-demo"
@using Syncfusion.Blazor.Calendars

<div>
    <label>Select Date and Time:</label>
    <SfDateTimePicker TValue="DateTime?" 
                      @bind-Value="@selectedDateTime"
                      Placeholder="Choose date and time">
        <DateTimePickerEvents TValue="DateTime?" ValueChange="@OnValueChanged"></DateTimePickerEvents>
    </SfDateTimePicker>
    
    @if (selectedDateTime.HasValue)
    {
        <p>Selected: @selectedDateTime.Value.ToString("g")</p>
    }
</div>

@code {
    private DateTime? selectedDateTime;
    
    private void OnValueChanged(ChangedEventArgs<DateTime?> args)
    {
        selectedDateTime = args.Value;
        Console.WriteLine($"Date changed to: {selectedDateTime}");
    }
}

よくあるパターン

パターン 1：日付範囲の制約を設定する

<SfDateTimePicker TValue="DateTime?" 
                  Min="@minDate" 
                  Max="@maxDate"
                  Value="selectedDateTime">
</SfDateTimePicker>

@code {
    private DateTime minDate = new DateTime(2024, 1, 1);
    private DateTime maxDate = new DateTime(2024, 12, 31);
    private DateTime? selectedDateTime;
}

パターン 2：書式をカスタマイズする

<SfDateTimePicker TValue="DateTime?" 
                  Format="dd/MM/yyyy HH:mm"
                  Value="selectedDateTime">
</SfDateTimePicker>

パターン 3：入力マスクを使用する

<SfDateTimePicker TValue="DateTime?" 
                  EnableMask="true"
                  Format="dd/MM/yyyy HH:mm"
                  Value="selectedDateTime">
    <DateTimePickerMaskPlaceholder Day="dd" Month="MM" Year="yyyy" Hour="HH" Minute="mm"></DateTimePickerMaskPlaceholder>
</SfDateTimePicker>

パターン 4：データバインディングを使用する

<SfDateTimePicker TValue="DateTime?" 
                  @bind-Value="model.CreatedDate">
    <DateTimePickerEvents TValue="DateTime?" ValueChange="@OnDateChanged"></DateTimePickerEvents>
</SfDateTimePicker>

主なプロパティ

プロパティ	型	目的
Value	TValue	選択した日時の値を取得または設定します
@bind-Value	TValue	双方向データバインディング
Format	string	表示形式（例：「dd/MM/yyyy HH:mm」）
TimeFormat	string	時刻部分のみの形式（例：「HH:mm」）
Placeholder	string	入力フィールドのプレースホルダーテキスト
Min	DateTime	選択可能な最小日付（日付部分）
Max	DateTime	選択可能な最大日付（日付部分）
MinTime	DateTime	選択可能な最小時刻
MaxTime	DateTime	選択可能な最大時刻
Step	int	時刻の間隔（分単位、既定値：30）
ScrollTo	DateTime?	時刻リストの初期スクロール位置
AllowEdit	bool	テキストの手動入力を許可します
StrictMode	bool	厳密な入力検証を適用します
EnableMask	bool	日時入力の入力マスクを有効にします
OpenOnFocus	bool	入力欄にフォーカスしたときにポップアップを開きます
FloatLabelType	FloatLabelType	フローティングラベルの動作
Enabled	bool	コンポーネントを有効または無効にします
Readonly	bool	コンポーネントを読み取り専用にします
ShowClearButton	bool	クリアボタンを表示します
ShowTodayButton	bool	カレンダーに今日ボタンを表示します
WeekNumber	bool	週番号を表示します
FirstDayOfWeek	int	週の開始曜日（0=日曜日、1=月曜日）
Start	CalendarView	初期カレンダービュー
Depth	CalendarView	最も深いビューのレベル
ZIndex	int	ポップアップの Z-index
Width	string	コンポーネントの幅
CssClass	string	カスタム CSS クラス

---

TimePicker

TimePicker コンポーネントの実装とカスタマイズに関する包括的なスキルです。このスキルでは、インストール、設定、データバインディング、イベント、スタイル設定、アクセシビリティ、国際化、入力マスクなどの高度な機能について説明します。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• Blazor アプリケーションに TimePicker コンポーネントをインストールしてセットアップする
• 基本的な実装や高度な TimePicker の実装を作成する
• 時刻形式（12 時間制、24 時間制、カスタム形式）を設定する
• データバインディング（一方向、双方向、動的）を設定する
• TimePicker のイベント（ValueChange、OnOpen、OnClose、Blur、Focus など）を処理する
• CSS を使用して外観やスタイルをカスタマイズする
• 入力マスクと検証を実装する
• アクセシビリティ（キーボード操作、ARIA 属性、スクリーンリーダー）を設定する
• グローバリゼーション対応（ローカライズ、アラビア語／ヘブライ語向け RTL）を追加する
• 時刻の間隔とステップ値を設定する
• モバイル端末で全画面モードを実装する

コンポーネントの概要

SfTimePicker は、時刻を選択するための Blazor 入力コンポーネントです。次の機能を備えています。

• スクロール可能な時刻リストを備えたポップアップ式の時刻選択インターフェイス
• 設定可能な時刻形式と間隔
• 双方向データバインディングのサポート
• 組み込みの検証機能と入力マスク
• 完全なアクセシビリティ対応（WCAG 2.2、Section 508）
• 世界中のユーザー向けの RTL サポート
• 全画面モードを備えたモバイル対応
• キーボード操作のショートカット

クイックスタートの例

基本的な TimePicker

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" Placeholder="Select a time"></SfTimePicker>

値のバインディングを使用する TimePicker

@using Syncfusion.Blazor.Calendars

<p>Selected Time: @SelectedTime</p>

<SfTimePicker TValue="DateTime?" @bind-Value="@SelectedTime"></SfTimePicker>

@code {
    public DateTime? SelectedTime { get; set; } = DateTime.Now;
}

形式とステップを指定する TimePicker

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" 
    Value="@TimeValue" 
    Format="HH:mm"
    Step=60
    Placeholder="Select time (24-hour)">
</SfTimePicker>

@code {
    public DateTime TimeValue { get; set; } = DateTime.Now;
}

主なプロパティのリファレンス

主なプロパティ

プロパティ	型	説明	デフォルト
Value	TValue	現在の時刻の値（一方向バインディング）	null
@bind-Value	TValue	双方向データバインディング	-
Placeholder	string	入力欄のプレースホルダーテキスト	"Select a time"
Format	string	表示形式の文字列（HH:mm、hh:mm tt）	カルチャに基づく
InputFormats	string[]	入力として受け付ける形式パターン	カルチャに基づく
Step	int	時刻の間隔（分）	30
ScrollTo	DateTime?	時刻リストの初期スクロール位置	null
Min	DateTime	選択可能な最小時刻	00:00
Max	DateTime	選択可能な最大時刻	23:59
AllowEdit	bool	テキストの手動入力を許可するかどうか	true
StrictMode	bool	厳密な入力検証を適用するかどうか	false
EnableMask	bool	入力マスクを有効にするかどうか	false
OpenOnFocus	bool	入力欄にフォーカスが当たったときにポップアップを開くかどうか	false
FloatLabelType	FloatLabelType	フローティングラベルの動作	Never
Enabled	bool	コンポーネントを有効／無効にするかどうか	true
Readonly	bool	読み取り専用モード	false
ShowClearButton	bool	クリアボタンを表示するかどうか	false
EnableRtl	bool	右から左（RTL）の方向を有効にするかどうか	false
FullScreen	bool	モバイルでの全画面モード	false
ZIndex	int	ポップアップの Z-index	1000
Width	string	コンポーネントの幅	"100%"
CssClass	string	カスタム CSS クラス	null
TabIndex	int	タブ順序のインデックス	0

ドキュメントのナビゲーション

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール
• 名前空間のインポート
• Program.cs でのサービス登録
• テーマの設定と組み込み
• 基本的なコンポーネントの実装
• Step プロパティと時刻の間隔

時刻の形式

📄 参照： references/time-formats.md

• 表示形式のカスタマイズ
• 入力形式の設定
• 標準形式とカスタム形式の文字列
• カルチャに基づくデフォルトの形式
• 12 時間形式と 24 時間形式の例
• 各形式オプションの使いどころ

データバインディング

📄 参照： references/data-binding.md

• 一方向バインディングのパターン
• @bind-Value による双方向バインディング
• 値の動的な更新
• DateTime 型と DateTime? 型の処理
• 値変更イベントとの連携

イベントとハンドラー

📄 参照： references/events-and-handlers.md

• ValueChange イベント（EventCallback<ChangeEventArgs>）
• ポップアップの OnOpen／OnClose イベント
• Selected イベント（リストでの時刻選択）
• OnItemRender イベント（時刻リスト項目のカスタム描画）
• 入力欄の Focus／Blur イベント
• Cleared イベント（クリアボタンのクリック）
• Created／Destroyed ライフサイクルイベント
• TimePickerEvents 子コンポーネントの使用
• イベントハンドラーの実装パターン

スタイルと外観

📄 参照： references/styling-and-appearance.md

• カスタマイズ用の CSS クラス
• コンテナー要素のスタイル設定
• アイコン要素のスタイル設定
• ポップアップとリスト項目のスタイル設定
• モバイルデバイス向けの全画面モード
• テーマとの連携（Bootstrap、Material、Fluent）

アクセシビリティとグローバル化

📄 参照： references/accessibility-and-globalization.md

• WCAG 2.2 への準拠と標準
• キーボード操作のショートカット（矢印キー、Enter、Esc）
• WAI-ARIA 属性とロール
• RTL（右から左）への対応
• ローカライズとカルチャの設定
• スクリーンリーダーへの対応

マスクのサポート

📄 参照： references/mask-support.md

• 入力マスク用の EnableMask プロパティ
• TimePickerMaskPlaceholder ディレクティブ
• プレースホルダー文字のカスタマイズ（Hour、Minute、Second）
• 形式に応じたマスクパターン
• マスクを使用した入力検証

一般的なパターン

パターン 1：シンプルな時刻選択

複雑な要件がなく、基本的な時刻ピッカーが必要な場合：

<SfTimePicker TValue="DateTime?" 
    @bind-Value="@AppointmentTime"
    Placeholder="Select appointment time">
</SfTimePicker>

パターン 2：営業時間のみ

時刻選択を特定の時間帯に制限する場合：

<SfTimePicker TValue="DateTime?" 
    @bind-Value="@BusinessTime"
    Min="@new DateTime(2026, 1, 1, 09, 0, 0)"
    Max="@new DateTime(2026, 1, 1, 17, 0, 0)"
    Step=30
    Format="HH:mm">
</SfTimePicker>

@code {
    public DateTime? BusinessTime { get; set; }
}

パターン 3：AM/PM を使用する 12 時間形式

時刻を 12 時間形式で表示する場合：

<SfTimePicker TValue="DateTime?" 
    @bind-Value="@UserTime"
    Format="hh:mm tt"
    Placeholder="Select time (12-hour)">
</SfTimePicker>

@code {
    public DateTime? UserTime { get; set; } = DateTime.Now;
}

パターン 4：イベント処理を使用

時刻選択の変更を追跡する場合：

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" ValueChange="@OnTimeChanged"></TimePickerEvents>
</SfTimePicker>

@code {
    private void OnTimeChanged(ChangeEventArgs<DateTime?> args)
    {
        Console.WriteLine($"Time selected: {args.Value}");
    }
}

一般的なユースケース

1. 予約：営業時間の検証を伴う予約スケジュールの時刻選択
2. 時間追跡：タイムシートやアクティビティログに記録する開始時刻／終了時刻
3. シフト管理：人事／従業員管理アプリケーションでのシフト時刻の選択
4. 旅行予約：飛行機や列車の出発時刻／到着時刻の選択
5. 配送時間帯：E コマースで希望する配送時間帯を設定
6. 放送スケジュール：メディアアプリケーションでの放送時刻の選択
7. ミーティングスケジューラー：タイムゾーンに対応したバーチャルミーティングの時刻選択
8. ジム予約：フィットネス管理アプリでのクラス時刻の選択

前提条件

• Blazor WebAssembly または Blazor Server プロジェクト（.NET 7 以降）
• NuGet パッケージ：Syncfusion.Blazor.Calendars
• NuGet パッケージ：Syncfusion.Blazor.Themes
• Program.cs で Syncfusion サービスを登録済み

---

Calendar コンポーネントを実装する準備はできましたか？ まず上記の「はじめに」ガイドでセットアップを行い、その後、具体的なニーズに応じて他のリファレンスをご覧ください。

---

次のステップ： 選択したコンポーネントの「はじめに」ガイドから始め、具体的なタスクに応じて他のリファレンスをご覧ください。

詳細な実装パターン、完全なコード例、トラブルシューティングのガイダンスについては、具体的なニーズに応じた適切なリファレンスファイルをお読みください。