VB のたまご

作成日: 2017/03/06, 更新日: 2017/03/06



Calendar

    イメージ
  •  Calendar は、日付を選択できるカレンダー形式のコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「CalendarWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="CalendarWindow1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="CalendarWindow1" Height="300" Width="300">
        
        <Grid>
    
            <Calendar Margin="10" />
    
        </Grid>
        
    </Window>
    

  •  日付をクリック選択できるほか、カレンダーの内、上部の左矢印をクリックで前月表示、右矢印で翌月表示に切り替わります。 上部の中央(2017年2月)をクリックすると、2017年のうち何月を選択するかの「月選択」に切り替わります。 さらに、上部の中央(2017年)をクリックすると、2017年付近の「年度選択」に切り替わります。 日付選択→月選択→日選択、または日付タイトル選択→月タイトル選択→年タイトル選択、という遷移順です。

  •  続いて、プログラム上で任意の日付を選択してみます。以下はそのサンプルです。

  • <Window x:Class="CalendarWindow2"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="CalendarWindow2" Height="300" Width="300">
        
        <StackPanel Margin="10">
    
            <Button Content="昨日の日付を選択" Margin="10" Click="Click" />
            <Calendar Name="calendar1" Margin="10" SelectedDatesChanged="SelectedDatesChanged" />
    
        </StackPanel>
        
    </Window>
    

    Public Class CalendarWindow2
    
        Private Sub Click(sender As Object, e As RoutedEventArgs)
    
            Me.calendar1.SelectedDate = DateTime.Today.AddDays(-1)
    
        End Sub
    
        Private Sub SelectedDatesChanged(sender As Object, e As SelectionChangedEventArgs)
    
            ' Remove は、変更前の選択項目
            If 0 < e.RemovedItems.Count Then
                Console.WriteLine($"")
                For Each dt As DateTime In e.RemovedItems
                    Console.WriteLine($"{dt.ToString("yyyy/MM/dd")} remove.")
                Next
            End If
    
            ' Add は、変更後の選択項目
            If 0 < e.AddedItems.Count Then
                For Each dt As DateTime In e.AddedItems
                    Console.WriteLine($"{dt.ToString("yyyy/MM/dd")} add.")
                Next
            End If
    
        End Sub
    
    End Class
    

  •  さらに、日付を選択した際に発生するイベント SelectedDatesChanged イベントも記載しています。 SelectedDatesChanged イベントの引数からは、変更前と変更後の値を取得することができます。これを使って、変更した値を調べています。 イベント引数名には、RemovedItems, AddedItems とありますが、ここの例では、「選択項目の削除」や「新規項目の追加」という意味ではありません。

  • スポンサーリンク


  •  ところで、選択できる日付が1つだけでしたね。複数日付を選択できるようにしたのが以下のサンプルです。

  • <Window x:Class="CalendarWindow3"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="CalendarWindow3" Height="300" Width="300">
    
        <StackPanel Margin="10">
    
            <Button Content="昨日の日付を選択" Margin="10" Click="Click" />
            <Calendar Name="calendar1" Margin="10" SelectedDatesChanged="SelectedDatesChanged" SelectionMode="MultipleRange" />
    
        </StackPanel>
    
    </Window>
    

    Public Class CalendarWindow3
    
        Private Sub Click(sender As Object, e As RoutedEventArgs)
    
            Me.calendar1.SelectedDate = DateTime.Today.AddDays(-1)
    
        End Sub
    
        Private Sub SelectedDatesChanged(sender As Object, e As SelectionChangedEventArgs)
    
            ' Remove は、変更前の選択項目
            If 0 < e.RemovedItems.Count Then
                Console.WriteLine($"")
                For Each dt As DateTime In e.RemovedItems
                    Console.WriteLine($"{dt.ToString("yyyy/MM/dd")} remove.")
                Next
            End If
    
            ' Add は、変更後の選択項目
            If 0 < e.AddedItems.Count Then
                For Each dt As DateTime In e.AddedItems
                    Console.WriteLine($"{dt.ToString("yyyy/MM/dd")} add.")
                Next
            End If
    
        End Sub
    
    End Class
    

  •  SelectionMode プロパティに「MultipleRange」を設定することで、複数の日付を選択することができます。 これにより、SelectedDatesChanged イベントでは複数の日付が選択されていることが分かると思います。

  •  ある任意の日付に×を付けることができます。以下はそのサンプルです。

  • <Window x:Class="CalendarWindow4"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="CalendarWindow4" Height="300" Width="300">
    
        <StackPanel Margin="10">
    
            <Calendar Margin="10">
    
                <Calendar.BlackoutDates>
                    <CalendarDateRange Start="2/1/2017" End="2/1/2017" />
                    <CalendarDateRange Start="2/8/2017" End="2/8/2017" />
                    <CalendarDateRange Start="2/15/2017" End="2/15/2017" />
                    <CalendarDateRange Start="2/22/2017" End="2/22/2017" />
                </Calendar.BlackoutDates>
    
            </Calendar>
    
        </StackPanel>
    
    </Window>
    

  •  ここでは、毎週水曜日は定休日という表現用に設定しました。

  •  少し極端な例ですが、そもそも選択すらさせたくない場合は、表示できる日付の範囲を限定してしまいます。以下のサンプルです。

  • <Window x:Class="CalendarWindow5"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="CalendarWindow5" Height="300" Width="300">
        
        <Grid>
    
            <Calendar Margin="10"
                      DisplayDateStart="2/15/2017"
                      DisplayDateEnd="2/25/2017" />
    
        </Grid>
        
    </Window>