Calendar Data Binding Simplified

In the 2014 v1 release, we’ve improved the data binding capabilities of the C1Calendar control for WinRT and Windows Phone. Now it’s never been easier to take a list of business objects and visualize them on a calendar. In this post I will show you the simple steps to take advantage of this improvement.

Step 1: Data Collection

Let’s define ‘MyAppointment’ to represent a very simple business object. Make sure to include at least one DateTime field.

public class MyAppointment  
    public string Subject { get; set; }  
    public DateTime Date { get; set; }  

Let’s create a collection of ‘MyAppointment’ and bind it to the new DataSource property on the C1Calendar control. Make sure to also set the StartTimePath property to the date field from our collection.

List<MyAppointment> appointments = new List<MyAppointment>();  
appointments.Add(new MyAppointment { Subject = "Appointment 1", Date = DateTime.Now.AddDays(1) });  
appointments.Add(new MyAppointment { Subject = "Appointment 2", Date = DateTime.Now.AddDays(2) });  
appointments.Add(new MyAppointment { Subject = "Appointment 3", Date = DateTime.Now.AddDays(3) });  
appointments.Add(new MyAppointment { Subject = "Appointment 4", Date = DateTime.Now.AddDays(3) });  
appointments.Add(new MyAppointment { Subject = "Appointment 5", Date = DateTime.Now.AddDays(3) });  
appointments.Add(new MyAppointment { Subject = "Appointment 6", Date = DateTime.Now.AddDays(3) });  

// bind to C1Calendar  
c1Calendar1.StartTimePath = "Date";  
c1Calendar1.DataSource = appointments;  

Notice that several appointments are set on the same day. This is handled by the C1Calendar control and we’ll see how in the next step.

Step 2: Day Template

Next we need to define the template to represent our business object on the calendar. C1Calendar provides three template properties that allow you to customize the appearance of the control.

  • DaySlotTemplate – base template for all days
  • DayOfWeekSlotTemplate – template for week day names along the top
  • BoldedDaySlotTemplate – template for dates set in BoldedDays collection or DataSource

In our simple data binding scenario, we are interested in the BoldedDaySlotTemplate. Let’s define this template and then discuss it.

<c1cal:C1Calendar x:Name="c1Calendar1" xmlns:c1cal="using:C1.Xaml.Calendar">  
                <ListBox ItemsSource="{Binding DataSource}" Background="Transparent">  
                            <TextBlock Text="{Binding Subject}" Foreground="Yellow"/>  
                <!-- day number -->  
                <TextBlock Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5" />  

To understand this template, you must understand that a particular day may include multiple items bound to it (ie, you can have more than one appointment in a given day). C1Calendar supports this scenario by exposing a DataSource property for each day that you can use to obtain the collection of objects for that single day. So we bind our ListBox ItemsSource to the DataSource property, and then we bind elements within the ListBox template to the ‘MyAppointment’ members, such as Subject. Lastly, in our template we also include a TextBlock with a default Binding. This will show the rudimentary day number on top of our ListBox. Calendar_BoldedDaySlotTemplate And there we have bound a collection of objects to C1Calendar with just the bare minimum of code necessary. Of course, you can make nicer templates and use more complex data collections. For scenarios where you need more than one template, you can also use template selectors. I won’t cover that in this blog post, but you can find more samples for C1Calendar that cover this.

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus