[WPF] Calendar コントロール

スポンサーリンク

Calendar コントロールは、カレンダー機能を提供し、ユーザーが日付を選択できるようにするコントロールを表します。

基本的なプロパティや、イベント処理について説明をします。

スポンサーリンク

Calendar を表示するには?

Calendar を表示するのは、かんたんです。XAML だと以下のタグのみで表示することができます。

XAMLの例

<Calendar />

C#の例

Calendar cal = new Calendar();
root.Children.Add(cal);
カレンダーの例

カレンダーの例

スポンサーリンク

指定した日が含まれる月をカレンダーに表示するには?

指定した日が含まれる月をカレンダーに表示するには、以下の DisplayDate プロパティを使用します。

プロパティ 説明
DisplayDate カレンダーに表示する日付を取得または設定します

以下に例を示します。

この例では、DisplayDate に「2020年10月10日」を設定しています。カレンダーには「2020年10月10日」を含む月が表示されます。

XAMLの例

<Calendar DisplayDate="2020/10/10"/>

C#の例

Calendar cal = new Calendar();
cal.DisplayDate = new DateTime(2020, 10, 10);
root.Children.Add(cal);

実行例を以下に示します。

実行例

実行例

スポンサーリンク

現在選択されている日付を取得または設定するには?

現在選択されている日付を取得または設定するには、以下の SelectedDate プロパティを使用します。

プロパティ 説明
SelectedDate カレンダーに表示する日付を取得または設定します

以下に例を示します。

この例では、2020年5月5日を SelectedDate に設定しており、表示上は水色になり、選択されている状態を表します。

ちなみに、グレーになっている 2020年5月10日 は「今日(アプリを実行した日)」を表して入ります。

XAMLの例

<Calendar SelectedDate="2020/5/5"/>

C#の例

Calendar cal = new Calendar();
cal.SelectedDate = new DateTime(2020, 5, 5);
root.Children.Add(cal);
SelectedDate プロパティの使用例

SelectedDate プロパティの使用例

※複数の日付を選択する場合は SelectedDates プロパティを使用します。詳しくは、以下の「日付の選択方法を変更するには?」を参照してください。

スポンサーリンク

日付の選択方法を変更するには?

既定では、1日の日付のみを選択できるようになっているのですが、以下に示す SelectionMode プロパティの値を変更することで、選択方法を変えることができます。

プロパティ 説明
SelectionMode 日付の選択方法を取得または設定します

SelectionMode プロパティに設定できる値は、以下に示す CalendarSelectionMode 列挙型 の値です。

説明
MultipleRange 隣接していない複数の日付範囲を選択できます。後述する SelectedDates プロパティを使用すると、選択した日付を取得できます。
None 日付を選択することはできません。
SingleDate 1つの日付のみを選択することができます。
SingleRange 1つの日付範囲を選択することができます。複数の日付範囲を選択したい場合は MultipleRange を使用します。

以下に例を示します。

複数の日付範囲を選択する例

SelectionMode プロパティに MultipleRange を指定して、コードで複数の日付範囲を選択する例を示します。

この例では、2020年5月2日〜2020年5月7日、2020年5月13日〜2020年5月15日、2020年5月26日〜2020年5月29日を選択状態にします。

C#の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.SelectedDates.AddRange(new DateTime(2020, 5, 2),
     new DateTime(2020, 5, 7));
cal.SelectedDates.AddRange(new DateTime(2020, 5, 13),
     new DateTime(2020, 5, 15));
cal.SelectedDates.AddRange(new DateTime(2020, 5, 26),
     new DateTime(2020, 5, 29));
root.Children.Add(cal);
実行例

実行例

XAML の場合は、SelectedDates プロパティを使用して連続した日付を選択することができません。ただし、単一の日を複数選択することは可能です。

以下は、2020年5月2日、2020年5月13日、2020年5月26日を選択します。

XAMLの例

<Calendar SelectionMode="MultipleRange">
    <Calendar.SelectedDates>
        <sys:DateTime>2020/5/2</sys:DateTime>
        <sys:DateTime>2020/5/13</sys:DateTime>
        <sys:DateTime>2020/5/26</sys:DateTime>
    </Calendar.SelectedDates>
</Calendar>
実行例

実行例

日付を選択できないようにする例

SelectionMode プロパティに None を指定して、日付を選択できないようにする例を示します。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.None;
root.Children.Add(cal);

XAML の例

<Calendar SelectionMode="None" />

実行してみるとわかりますが、日付を選択すると枠線がつきますが、水色で塗り潰しになっていないので、その日付は選択されていません。

実行例

実行例

1つの日付のみを選択する例

SelectionMode プロパティに SingleDate を指定して、1つの日付のみを選択できるようにする例を示します。
C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.SingleDate;
cal.SelectedDate = new DateTime(2020, 5, 26);
root.Children.Add(cal);

XAML の例

<Calendar SelectionMode="SingleDate"
    <Calendar.SelectedDate>
        <sys:DateTime>2020/5/26</sys:DateTime>
    </Calendar.SelectedDate>
</Calendar>

実行例を以下に示します。この例では2020年5月26日を選択しています。

実行例

実行例

1つの日付範囲を選択する例

SelectionMode プロパティに SingleRange を指定して、1つの日付範囲を選択できるようにする例を示します。 C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.SingleRange;
cal.SelectedDates.AddRange(
     new DateTime(2020, 5, 12), new DateTime(2020, 5, 15));
root.Children.Add(cal);

XAML では 1つの日付範囲を設定することができないようです。以下のように SelecgionMode を設定することはできます。

XAML の例

<Calendar SelectionMode="SingleRange" />

実行例を以下に示します。この例では 2020年5月12日 〜 2020年5月15日 を選択しています。

実行例

実行例

スポンサーリンク

選択不可能な日を設定するには?

カレンダーで選択されると困る日がある場合は、以下に示す BlackoutDate プロパティを使用します。

プロパティ 説明
BlackoutDates 選択不可能日を取得または設定します。
SelectionMode プロパティが “None” 以外にする必要があります。

以下に例を示します。この例では 2020年5月1日 〜 2020年5月10日 と 2020年5月20日を選択不可能日に設定します。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.BlackoutDates.Add(
    new CalendarDateRange(
        new DateTime(2020, 5, 1), new DateTime(2020, 5, 10)));
cal.BlackoutDates.Add(
     new CalendarDateRange(
        new DateTime(2020, 5, 20)));
root.Children.Add(cal);

XAML では 1つの日付範囲を設定することができないようです。以下のように SelecgionMode を設定することはできます。

XAML の例

<Calendar SelectionMode="SingleRange" />

実行例を以下に示します。

実行例

実行例

スポンサーリンク

カレンダーの範囲を制限するには?

カレンダーの範囲を制限するには、以下に示す DisplayDateStart と DisplayDateEnd のプロパティを使用します。 ユーザーは、この範囲外の日付はスクロールや選択をすることはできません。

プロパティ 説明
DisplayDateStart 表示可能範囲の開始日を取得/設定する
DisplayDateEnd 表示可能範囲の終了日を取得/設定する

以下に例を示します。この例では カレンダーの範囲を 2020年5月10日 〜 2020年5月20日 に制限しています。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.DisplayDateStart = new DateTime(2020,5,10);
cal.DisplayDateEnd = new DateTime(2020, 5, 20);
root.Children.Add(cal);

XAML の例

<Calendar DisplayDateStart="2020/5/10" DisplayDateEnd="2020/5/20" />
実行例

実行例

スポンサーリンク

「今日」を強調表示するかどうかを設定するには?

「今日」を強調表示するかどうかを設定するには、以下に示す IsTodayHighlighted プロパティを使用します。

プロパティ 説明
IsTodayHighlighted 「今日」を強調表示する場合は True、強調表示しない場合は False

以下に例を示します。この例では IsTodayHighlighted プロパティに False を設定し、「今日」が強調表示されないようにしています。

C# の例

Calendar cal = new Calendar();
cal.IsTodayHighlighted = false;
root.Children.Add(cal);

XAML の例

<Calendar IsTodayHighlighted="False" />

以下に実行例を示します。この例を実行した日は 2020年5月24日 なのですが、強調表示されていないことがわかります。

実行例

実行例

スポンサーリンク

表示する期間を変更するには

Calendar コントロールは、既定で「1ヶ月分」を表示するようになっていますが、以下の DisplayMode プロパティを使用することで、カレンダーに表示する期間を「10年」「1ヶ月」「1年」に切り替えることができます。

プロパティ 説明
DisplayMode カレンダーに表示する期間を取得/設定する。
既定値は「Month(月)」。この他に「Decade(10年)」「Year(年)」を指定することができる。

以下に例を示します。

C# の例

Calendar cal = new Calendar();
cal.DisplayMode = CalendarMode.Month;   // 月
//cal.DisplayMode = CalendarMode.Decade;  // 10年
//cal.DisplayMode = CalendarMode.Year;    // 1年

root.Children.Add(cal);

XAML の例

<Grid x:Name="root">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Calendar DisplayMode="Decade" />
        <TextBlock Text="DisplayMode = Decade" HorizontalAlignment="Center"/>
    </StackPanel>

    <StackPanel Grid.Column="1">
        <Calendar DisplayMode="Month" />
        <TextBlock Text="DisplayMode = Month" HorizontalAlignment="Center"/>
    </StackPanel>

    <StackPanel Grid.Column="2">
        <Calendar DisplayMode="Year" IsTodayHighlighted="False"/>
        <TextBlock Text="DisplayMode = Year" HorizontalAlignment="Center"/>
    </StackPanel>
</Grid>

実行例を以下に示します。

実行例

実行例

スポンサーリンク

表示する日が変更されたことを知るには?

DisplayDate プロパティ使用することで、指定した日が含まれる月をカレンダーに表示することができました。

DisplayDateChanged イベントを使用すると、「表示する日が変更された」ということを検知することができます。

例えば DisplayDate プロパティに 2010年5月10日 を指定した場合、カレンダーを6月に変更すると DisplayDateChanged イベントが起動します。

以下に例を示します。
XAML の例

<Calendar DisplayDate="2020/5/10" 
          DisplayDateChanged="Calendar_DisplayDateChanged"/>

C# の例

private void Calendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
    MessageBox.Show("DisplayDate プロパティが変更されました");
}

実行例を以下に示します。

実行例

実行例

スポンサーリンク

表示期間が変更されたことを知るには?

DisplayModeChanged イベントを使用することで、表示期間(DisplayMode プロパティ)の変更を知ることができます。

例を以下に示します。この例では、コンストラクタで DisplayMode を “Decade” に変更しています。DisplayModeChanged イベントが発生し、「DisplayMode が変更されました」を表示します。

XAML の例

<Calendar x:Name="cal" DisplayMode="Month" DisplayModeChanged="Calendar_DisplayModeChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.DisplayMode = CalendarMode.Decade;
}

private void Calendar_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
    MessageBox.Show("DisplayMode が変更されました");
}
実行例

実行例

スポンサーリンク

日付の選択方法が変更されたことを知るには?

SelectionModeChanged イベントを使用することで、日付の選択方法(SelectionMode プロパティ)の変更を知ることができます。

例を以下に示します。この例では、コンストラクタで SelectionMode を “None” に変更しています。SelectionModeChanged イベントが発生し、「SelectionMode が変更されました」を表示します。
XAML の例

<Calendar x:Name="cal" SelectionMode="SingleDate" SelectionModeChanged="Calendar_SelectionModeChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.SelectionMode = CalendarSelectionMode.None;
}

private void Calendar_SelectionModeChanged(object sender, EventArgs e)
{
    MessageBox.Show("SelectionMode が変更されました");
}
スポンサーリンク

選択されている日付が変更されたことを知るには?

SelectedDatesChanged イベントを使用すると、選択されている日付が変更されたことを知ることができます。

例を以下に示します。この例では、コンストラクタで SelectionMode を “None” に変更しています。SelectionModeChanged イベントが発生し、「SelectionMode が変更されました」を表示します。
XAML の例

<Calendar x:Name="cal" SelectionMode="SingleDate" SelectedDatesChanged="cal_SelectedDatesChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.SelectedDate = new DateTime(2020, 5, 15);
}

private void cal_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
    MessageBox.Show($"{cal.SelectedDate}が選択されました。");
}
Please follow and like us:

コメント

タイトルとURLをコピーしました