Calendar for UWP
手順2：Calendar へのデータの追加
クイックスタート > 手順2：Calendar へのデータの追加
全て展開
すべて折りたたむ

前の手順では、C1Calendar コントロールをアプリケーションに追加しました。この手順では、DataSeries オブジェクトとそのデータを追加します。

プログラムでカレンダーにデータを追加するには、次の手順に従います。

  1. ［表示］→［コード］を選択してコードビューに切り替えます。
  2. 次の imports 文をページの先頭に追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Imports Windows.UI.ViewManagement
Imports C1.Xaml
Imports C1.Xaml.Calendar

    C# コードの書き方

    C#
    コードのコピー 
    using Windows.UI.ViewManagement;
using C1.Xaml;
using C1.Xaml.Calendar;
  3. MainPage クラス内に次のコードを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    ' 予定の辞書
Private _boldedDays As New Dictionary(Of DateTime, String)()
Private _dayTemplateSelector As DaySlotTemplateSelector = Nothing
Private _loaded As Boolean = False

    C# コードの書き方

    C#
    コードのコピー 
    // 予定の辞書
private Dictionary<DateTime, string> _boldedDays = new Dictionary<DateTime, string>();
private DaySlotTemplateSelector _dayTemplateSelector = null;
private bool _loaded = false;
  4. MainPage コードを更新します。次のようになります。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Public Sub New()
    Me.InitializeComponent()
    AddHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged
    Calendar.DayOfWeekSlotTemplateSelector = New DayOfWeekTemplateSelector()
    ' 太字の日を追加します
    _boldedDays.Add(DateTime.Today.AddDays(2), "スポーツ\r\nを忘れない。")
    _boldedDays.Add(DateTime.Today.AddDays(13), "誕生日")
    _boldedDays.Add(DateTime.Today.AddDays(22), "重要な会議")
    _boldedDays.Add(DateTime.Today.AddDays(-1), "8時に記念& vbCr & vbLf &パーティー")
    _boldedDays.Add(DateTime.Today.AddDays(-12), "医者との約束")
    _boldedDays.Add(DateTime.Today.AddDays(-21), "会議2日目")
    _boldedDays.Add(DateTime.Today.AddDays(-22), "会議1日目")
    For Each val As DateTime In _boldedDays.Keys
        Calendar.BoldedDates.Add(val)
    Next
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    public MainPage()
{
    this.InitializeComponent();
    Window.Current.SizeChanged += Current_SizeChanged;
    Calendar.DayOfWeekSlotTemplateSelector = new DayOfWeekTemplateSelector();
    // 太字の日を追加します
    _boldedDays.Add(DateTime.Today.AddDays(2), "スポーツ\r\nを忘れない。");
    _boldedDays.Add(DateTime.Today.AddDays(13), "誕生日");
    _boldedDays.Add(DateTime.Today.AddDays(22), "重要な会議");
    _boldedDays.Add(DateTime.Today.AddDays(-1), "8時に記念\r\nパーティー");
    _boldedDays.Add(DateTime.Today.AddDays(-12), "医者との約束");
    _boldedDays.Add(DateTime.Today.AddDays(-21), "会議2日目");
    _boldedDays.Add(DateTime.Today.AddDays(-22), "会議1日目");
    foreach (DateTime val in _boldedDays.Keys)
    {
        Calendar.BoldedDates.Add(val);
    }
}
  5. MainPage クラス内で、追加したコードの直後に次のコードを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Sub Calendar_SelectedDateChanged(sender As Object, e As DateChangedEventArgs)
        If Calendar.SelectedDates.Count > 0 AndAlso _boldedDays.ContainsKey(Calendar.SelectedDates(0)) Then
            dayInfo.Text = _boldedDays(Calendar.SelectedDates(0))
        Else
            dayInfo.Text = ""
        End If
    End Sub
   ''' <summary>
   ''' 日付を太字にするためのカスタム DataTemplate を使用する DayTemplateSelector
   ''' </summary>
    Private ReadOnly Property DayTemplateSelector() As DaySlotTemplateSelector
        Get
            If _dayTemplateSelector Is Nothing Then
                _dayTemplateSelector = TryCast(Resources("DaySlotTemplateSelector"), DaySlotTemplateSelector)
                If _dayTemplateSelector IsNot Nothing Then
                    _dayTemplateSelector.BoldedDays = Me._boldedDays
                End If
            End If
            Return _dayTemplateSelector
        End Get
    End Property
    Private Sub Current_SizeChanged(sender As Object, e As Windows.UI.Core.WindowSizeChangedEventArgs)
        UpdateViewState()
    End Sub
    Private Sub UpdateViewState()
        Calendar.ClearValue(HeightProperty)
        Select Case ApplicationView.Value
            Case ApplicationViewState.Filled
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Fill", False)
                Exit Select
            Case ApplicationViewState.FullScreenLandscape
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Full", False)
                Exit Select
            Case ApplicationViewState.Snapped
                ' あまりスペースがないので、デフォルトの DaySlotTemplateSelector を使用します
                Calendar.Height = 400
                Calendar.DaySlotTemplateSelector = TryCast(Resources("SmallDaySlotTemplateSelector"), DataTemplateSelector)
                VisualStateManager.GoToState(Me, "Snapped", False)
                Exit Select
            Case ApplicationViewState.FullScreenPortrait
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Portrait", False)
                Exit Select
            Case Else
                Return
        End Select
        Calendar.UpdateLayout()
    End Sub
   ''' <summary>
   ''' このページが Frame に表示されるときに呼び出されます。
   ''' </summary>
   ''' <param name="e">このページにどのように到達したかを説明するイベントデータ。
   ''' Parameter プロパティは通常、ページの構成に使用されます。</param>
    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
        UpdateViewState()
        _loaded = True
    End Sub
    Protected Overrides Sub OnNavigatedFrom(e As NavigationEventArgs)
        _loaded = False
        MyBase.OnNavigatedFrom(e)
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    void Calendar_SelectedDateChanged(object sender, DateChangedEventArgs e)
        {
            if (Calendar.SelectedDates.Count > 0 && _boldedDays.ContainsKey(Calendar.SelectedDates[0]))
            {
                dayInfo.Text = _boldedDays[Calendar.SelectedDates[0]];
            }
            else
            {
                dayInfo.Text = "";
            }
        }
        /// <summary>
        /// 日付を太字にするためのカスタム DataTemplate を使用する DayTemplateSelector
        /// </summary>
        private DaySlotTemplateSelector DayTemplateSelector
        {
            get
            {
                if (_dayTemplateSelector == null)
                {
                    _dayTemplateSelector = Resources["DaySlotTemplateSelector"] as DaySlotTemplateSelector;
                    if (_dayTemplateSelector != null)
                    {
                        _dayTemplateSelector.BoldedDays = this._boldedDays;
                    }
                }
                return _dayTemplateSelector;
            }
        }
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            UpdateViewState();
        }
        private void UpdateViewState()
        {
            Calendar.ClearValue(HeightProperty);
            switch (ApplicationView.Value)
            {
                case ApplicationViewState.Filled:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Fill", false);
                    break;
                case ApplicationViewState.FullScreenLandscape:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Full", false);
                    break;
                case ApplicationViewState.Snapped:
                    // あまりスペースがないので、デフォルトの DaySlotTemplateSelector を使用します
                    Calendar.Height = 400;
                    Calendar.DaySlotTemplateSelector = Resources["SmallDaySlotTemplateSelector"] as DataTemplateSelector;
                    VisualStateManager.GoToState(this, "Snapped", false);
                    break;
                case ApplicationViewState.FullScreenPortrait:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Portrait", false);
                    break;
                default:
                    return;
            }
            Calendar.UpdateLayout();
        }
        /// <summary>
        /// このページが Frame に表示されるときに呼び出されます。
        /// </summary>
        /// <param name="e">このページにどのように到達したかを説明するイベントデータ。
        /// Parameter プロパティは通常、ページの構成に使用されます。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            UpdateViewState();
            _loaded = true;
        }
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            _loaded = false;
            base.OnNavigatedFrom(e);
        }
  6. MainPage クラスの直後に次のクラスを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Public Class DaySlotTemplateSelector
    Inherits C1.Xaml.Calendar.DaySlotTemplateSelector
    Public BoldedDays As New Dictionary(Of DateTime, String)()
    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DaySlot = TryCast(item, DaySlot)
        If slot IsNot Nothing AndAlso BoldedDays.ContainsKey(slot.[Date]) Then
            ' 日の DataTemplate に予定情報を表示できるようにタグに予定情報を格納します
            slot.Tag = BoldedDays(slot.[Date])
        Else
            ' 予定情報をクリアします
            slot.Tag = Nothing
        End If
        If slot IsNot Nothing AndAlso Not slot.IsAdjacent AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
            ' 土曜日の色を設定します
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' 基本クラスでは、DaySlotTemplateSelector.Resources コレクション内に定義されたカスタム DataTemplate が選択されます（MainPage.xaml ファイルを参照）
        Return MyBase.SelectTemplateCore(item, container)
    End Function
End Class
Public Class SmallDaySlotTemplateSelector
    Inherits C1.Xaml.Calendar.DaySlotTemplateSelector
    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DaySlot = TryCast(item, DaySlot)
        If slot IsNot Nothing AndAlso Not slot.IsAdjacent AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
            ' 土曜日の色を設定します
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' 基本クラスでは、DaySlotTemplateSelector.Resources コレクション内に定義されたカスタム DataTemplate が選択されます（MainPage.xaml ファイルを参照）
        Return MyBase.SelectTemplateCore(item, container)
    End Function
End Class
Public Class DayOfWeekTemplateSelector
    Inherits DataTemplateSelector
    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DayOfWeekSlot = TryCast(item, DayOfWeekSlot)
        If slot IsNot Nothing AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
           ' 土曜日の色を設定します
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' DataTemplate を変更しないでください
        Return Nothing
    End Function
End Class

    C# コードの書き方

    C#
    コードのコピー 
    public class DaySlotTemplateSelector : C1.Xaml.Calendar.DaySlotTemplateSelector
    {
        public Dictionary BoldedDays = new Dictionary();
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DaySlot slot = item as DaySlot;
            if (slot != null && BoldedDays.ContainsKey(slot.Date))
            {
                // 日の DataTemplate に予定情報を表示できるようにタグに予定情報を格納します
                slot.Tag = BoldedDays[slot.Date];
            }
            else
            {
                // 予定情報をクリアします
                slot.Tag = null;
            }
            if (slot != null && !slot.IsAdjacent && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // 土曜日の色を設定します
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // 基本クラスでは、DaySlotTemplateSelector.Resources コレクション内に定義されたカスタム DataTemplate が選択されます（MainPage.xaml ファイルを参照）
            return base.SelectTemplateCore(item, container);
        }
    }
    public class SmallDaySlotTemplateSelector : C1.Xaml.Calendar.DaySlotTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DaySlot slot = item as DaySlot;
            if (slot != null && !slot.IsAdjacent && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // 土曜日の色を設定します
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // 基本クラスでは、DaySlotTemplateSelector.Resources コレクション内に定義されたカスタム DataTemplate が選択されます（MainPage.xaml ファイルを参照）
            return base.SelectTemplateCore(item, container);
        }
    }
    public class DayOfWeekTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DayOfWeekSlot slot = item as DayOfWeekSlot;
            if (slot != null && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // 土曜日の色を設定します
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // DataTemplate を変更しないでください
            return null;
        }
    }

次の「手順3：Calendar アプリケーションの実行」では、Calendar for UWP の機能について説明します。

ここまでの成果

これで、C1Calendar にデータを追加できました。次の手順では、実行時の動作をいくつか確認します。

関連トピック
手順3：Calendar アプリケーションの実行

 

 

Copyright © MESCIUS, Inc. All rights reserved.