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 プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。

    ヘッダー オプション

    デフォルトでは、Ignite UI for Blazor Calendar コンポーネントは、選択された日付に関する情報を含むヘッダー領域を描画します。HasHeader プロパティを false に設定することで、ヘッダーを非表示にできます。HeaderOrientation プロパティを使用して、ヘッダーの vertical または horizontal を構成することもできます。

    Note

    Selection が複数に設定されている場合、Ignite UI for Blazor Calendar ヘッダーが描画されないことに注意してください。

    Note

    Ignite UI for Blazor Calendar の DOM プロパティは camelCase の命名を使用し、対応する HTML 属性は kebab-case を使用していることに注意してください。たとえば、HeaderOrientation プロパティは header-orientation 属性に対応します。

    Ignite UI for Blazor Calendar コンポーネントは、ヘッダーのタイトルをカスタマイズできる title スロットを公開します。

     <IgbCalendar HeaderOrientation="@CalendarHeaderOrientation.Vertical" HasHeader="true">
    <span slot="title">Trip dates</span>
 </IgbCalendar>

    次のサンプルは、上記の構成を示しています:

    日付の無効化

    場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、DisabledDates プロパティを使用して実現されます。DisabledDates プロパティは、IgbDateRangeDescriptor オブジェクトの配列です。各記述子には Type があり、オプションで Date オブジェクトの配列である DateRange があります。

    Type プロパティで使用できるオプションは次のとおりです:

    • After - DateRange の最初の日付以降の日付を無効にします。
    • Before - DateRange の最初の日付より前の日付を無効にします。
    • Between - DateRange の最初の日付と 2 番目の日付の間の日付を無効にします。
    • Specific - DateRange 配列で指定された日付を無効にします。
    • Weekdays - すべての平日を無効にします。
    • Weekends - すべての週末を無効にします。

    現在の月の 3 日から 8 日の日付を無効にするサンプルを作成します。

        <IgbCalendar DisabledDates="@DisabledDateDescriptor" />

    @code {
    public IgbDateRangeDescriptor[] DisabledDateDescriptor { get; set; }

    protected override void OnInitialized()
    {
        var today = DateTime.Today;

        DateTime[] range = new DateTime[] { new DateTime(today.Year, today.Month, 3), new DateTime(today.Year, today.Month, 8) };

        IgbDateRangeDescriptor dateDescriptor = new IgbDateRangeDescriptor() { DateRange = range, RangeType = DateRangeType.Specific };

        this.DisabledDateDescriptor = new IgbDateRangeDescriptor[] { dateDescriptor };
    }
}

    これらの構成では、次の結果が得られます:

    特定の日付

    SpecialDates プロパティは、DisabledDates とほぼ同じ構成原則を使用しています。特別な日付はハイライト表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。

    Calendar に特別な日付を追加しましょう。これを行うために、IgbDateRangeDescriptor を作成し、現在の月の 3 日から 8 日までの日付を渡します。

    <IgbCalendar SpecialDates="@CalendarSpecialDates"/>

@code {

    private IgbDateRangeDescriptor[] CalendarSpecialDates { get; set; }

    protected override void OnInitialized()
    {
        DateTime today = DateTime.Today;
        IgbDateRangeDescriptor specialDates = new IgbDateRangeDescriptor()
        {
            DateRange = new[] { new DateTime(today.Year, today.Month, 3), new DateTime(today.Year, today.Month, 8) },
            RangeType = DateRangeType.Between
        };

        this.CalendarSpecialDates = new IgbDateRangeDescriptor[] { specialDates };
    }
}

    次のデモは、休暇申請オプション付きの Calendar を示しています。

    週番号

    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 リファレンス

    その他のリソース