Blazor Calendar (カレンダー) の概要
Ignite UI for Blazor Calendar コンポーネントは、軽量で構成が簡単です。日付と曜日を表示するために使用されます。また、エンド ユーザーに月次または年次ビューを提供するための最良の方法でもあります。Ignite UI for Blazor カレンダー コントロールを使用すると、ユーザーがナビゲートできる最小および最大の日付範囲を制限できます。
Ignite UI for Ignite UI for Blazor Calendar は、日付情報を表示するための簡単で直感的な方法を提供します。単一または複数の日付選択モード、日付範囲の強表示と選択、キーボード ナビゲーション、週番号の有効化、サイズと間隔のオプションなど、さまざまな機能がパックされています。
Blazor Calendar の例
次の Blazor IgbCalendar コンポーネントの例は、1 日選択モードの基本的なカレンダーを示しています。それがどのように機能するかを確認するか、コード ビハインドを調べます。
Ignite UI を使用して Blazor で Calendar を作成する方法
IgbCalendar を使用する前に、次のように登録する必要があります。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));
また、追加の CSS ファイルをリンクして、スタイルを Ignite UI for Blazor IgbCalendar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
Ignite UI for Blazor IgbCalendar の使用を開始する最も簡単な方法は次のとおりです。
<IgbCalendar />
単一モード
ユーザーは、単一選択、複数選択、または範囲選択の 3 つの異なる選択モードから選択できます。デフォルトでは、Ignite UI for Blazor IgbCalendar は単一選択モードを使用していますが、この例に示すように Selection プロパティを設定することで変更できます。
<IgbCalendar Selection="@CalendarSelection.Multiple" />
範囲選択
同じ方法に従って、Selection を範囲モードに切り替えることができます:
<IgbCalendar Selection="@CalendarSelection.Range" />
Active View と Date
Ignite UI for Blazor Calendar コンポーネントを使用すると、日、月、年の 3 つの異なるビューを切り替えることができます。コンポーネントの ActiveView プロパティは、現在のビューを反映します。デフォルトでは、Calendar は最初に読み込まれたときに現在の日付を表示します。これは、ActiveDate プロパティを設定することで変更できます。ActiveDate プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。
週番号
ShowWeekNumbers プロパティを使用して、Calendar コンポーネントの週番号を表示できます。これを行うには、対応するブール属性 show-week-numbers を次のように使用します:
<IgbCalendar ShowWeekNumbers="true" />
次のデモは、週番号が有効になっている Calendar を示しています:
複数の月
VisibleMonths プロパティを使用すると、Calendar が days ビューのときに 1 か月以上表示できます。複数の月が表示されている場合は、Orientation プロパティを使用して、月を垂直方向にスタックするか水平方向にスタックするかを構成できます。デフォルトでは、Orientation プロパティは horizontal に設定されています。
Calendar には、前月と翌月の前後の日付が表示されます。これらの日付を非表示にするには、HideOutsideDays プロパティを true に設定するか、対応するブール属性 HideOutsideDays を使用します。
<IgbCalendar VisibleMonths="2" HideOutsideDays="true" />
次のサンプルは、複数月の構成を示しています:
サイズ
--ig-size CSS 変数を使用して、カレンダーの内部要素のサイズと間隔を制御できます。コンポーネントのデフォルトのサイズは大きいです。
イベント
選択した日付がエンド ユーザーによって変更されると、Calendar コンポーネントは Change イベントを発行します。このようにイベントをサブスクライブできます:
<IgbCalendar Change="@OnCalendarChange" />
@code {
public void OnCalendarChange(IgbComponentDataValueChangedEventArgs args)
{
}
}
キーボード ナビゲーション
TAB キーを使用してページを移動する場合、IgbCalendar が W3 アクセシビリティ推奨事項 (英語)に基づいて以下のタブ ストップを導入することに注意してください。
- [月の選択] ボタン
- [年の選択] ボタン
- [前へ] ボタン
- [次へ] ボタン
- アクティブな日付要素
IgbCalendar コンポーネントの日/月/年がフォーカスされている場合は、次を使用します:
- PAGE UP キーを押すと、前の月/年のページに移動します。
- PAGE DOWN キーを押すと、次の月/年のページに移動します。
- HOME キーを使用して、現在の月の最初の日/最初の月を表示/最初の年を表示します。
- END キーを押すと、当月/先月/昨年の最終日にフォーカスされます。
- 矢印 キーを使用して、日/月/年をナビゲートします。最初の項目の前と最後の項目の後に移動すると、ビューが次/前の月/年のページに切り替わります。
days ビュー内の日がフォーカスされている場合は、次を使用します:
- SHIFT + PAGE UP キーで前年に移動します。
- SHIFT + PAGE DOWN キーを押して翌年に移動します。
- SPACE または ENTER キーを押して、現在フォーカスされている日を選択します。
months ビュー内の月がフォーカスされている場合は、次を使用します:
- SPACE または ENTER キーを押すと、
ActiveDateが現在フォーカスされている月に変更され、daysビューに切り替わります。
years ビュー内の年がフォーカスされている場合は、次を使用します:
- SPACE または ENTER キーを使用して、
ActiveDateを現在フォーカスされている年に変更し、monthsビューに切り替えます。
サブヘッダー内の前または次のボタンにフォーカスがある場合は、次を使用します:
- SPACE または ENTER キーを押すと、前/翌月/年のページに切り替わります。
サブヘッダー内の月ボタンにフォーカスがある場合は、次を使用します:
- SPACE または ENTER キーを押して、
monthsビューに切り替えます。
サブヘッダー内の年ボタンにフォーカスがある場合は、次を使用します:
- SPACE または ENTER キーを押して、
yearsビューに切り替えます。
スタイル設定
IgbCalendar コンポーネントは、その内部要素のほぼすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:
| 名前 | 説明 |
|---|---|
header |
ヘッダー要素。 |
header-title |
ヘッダーのタイトル要素。 |
header-date |
ヘッダーの日付要素。 |
content |
ビューとナビゲーション要素を含むコンテンツ要素。 |
navigation |
ナビゲーション コンテナー要素。 |
months-navigation |
月のナビゲーション ボタン要素。 |
years-navigation |
年のナビゲーション ボタン要素。 |
years-range |
年の範囲の要素。 |
navigation-buttons |
ナビゲーション ボタン コンテナー。 |
navigation-button |
前/次のナビゲーション ボタン。 |
days-view-container |
日ビュー コンテナー要素。 |
days-view |
日ビュー要素。 |
months-view |
月ビュー要素。 |
years-view |
年ビュー要素。 |
days-row |
日行要素。 |
label |
週ヘッダー ラベル要素。 |
week-number |
週番号要素。 |
week-number-inner |
週番号の内部要素。 |
date |
日付要素。 |
date-inner |
日付の内部要素。 |
first |
最初に選択された日付要素。 |
last |
最後に選択された日付要素。 |
inactive |
非アクティブな日付要素。 |
hidden |
非表示の日付要素。 |
weekend |
週末の日付要素。 |
range |
範囲選択の要素。 |
special |
特別な日付要素。 |
disabled |
無効な日付要素。 |
single |
単一選択の日付要素。 |
preview |
範囲選択プレビュー日付要素。 |
month |
月の要素。 |
month-inner |
月の内部要素。 |
year |
年の要素。 |
year-inner |
年の内部要素。 |
selected |
選択された状態を示します。日付、月、年の要素に適用されます。 |
current |
現在の状態を示します。日付、月、年の要素に適用されます。 |
これらの CSS パーツを使用して、次のように IgbCalendar コンポーネントの外観をカスタマイズできます:
igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
background: var(--ig-primary-500);
border-color: var(--ig-primary-800);
}
igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
background: var(--ig-primary-500);
border-color: var(--ig-primary-800);
}
igc-calendar::part(label),
igc-calendar::part(navigation-button),
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
color: var(--ig-primary-300);
}
igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
color: var(--ig-primary-800);
}
次のサンプルは、上記の CSS 構成を示しています:
API リファレンス
IgbCalendarIgbRadioIgbRadioGroupActiveDateActiveViewIgbDateRangeDescriptorDateRange- スタイル設定 & テーマ