Windows Phone 7 MVVM #8 - RadCalendar

Hey folks, it’s been a little while since we discussed the MVVM pattern with the RadControls for Windows Phone, so I’m back to talk about one of the new controls we have available with the Q2 2011 release – RadCalendar.  RadCalendar is the Telerik answer to the native OS calendar in Windows Phone, offering similar functionality as far as how appointments are displayed and how you can navigate through months.  We also have a rich event structure in place to ensure you can do anything you want when selecting a timeslot – including a demo that gives some example code for an agenda view that you can copy and paste into your own projects.

Starting Up

Opening up our project from last time, I’m seeing a notification in Visual Studio:

Oh yeah, Q2 2011 was released!  That means I need to utilize the Visual Studio Extensions that were installed to upgrade this project!  I can now just follow along in the wizard:

And get a handy report letting me know everything worked out right:

Gotta love those Visual Studio Extensions that are in the full install of RadControls for Windows Phone!

But what’s that in the Error List window?  We had a few changes in our charting API before the final release (check the release notes for all the details), so we just switch instances of AxisX to HorizontalAxis, AxisY to VerticalAxis, and LabelStep to LabelInterval.  Once those are set, a quick build and we’re on our way to RadCalendar.

Step 1 - Adding a RadCalendar View

The first thing we want to do on the path to adding RadCalendar is to create a new Windows Phone Portrait Page named RadCalendarMVVM.xaml in our Pages folder.   We can work with the default layout, changing the application title to our standard ‘{StaticResource xAppTitle}’ as well as adding a namespace reference:

Then by adding the following to our Xaml we’ll see a RadCalendar appear – look familiar?  ;)

Step 2 – Two Classes and a ViewModel

One of the important things to note is that we were thinking ahead a bit with the knowledge that the Windows Phone Mango release will allow applications to access the phone calendar, so our calendar control works on the basis of the iAppointment object.  The good thing is that kind of like with RadScheduleView for the Silverlight and WPF suites you can easily customize an appointment and utilize that within your application, so we’ll do just that!

Create a new class named CustomAppointment.cs within the ExClasses folder.  Inherit from and implement the IAppointment interface, which after a little cleaning looks like:

Once this is in place we can then create a new AppointmentsSource to use with RadCalendar.  Create a new class in ExClasses named MyAppointmentSource and have it inherit from AppointmentSource.  If you implement AppointmentSource you’ll notice that the override for FetchData pops into view.  This is the method used for actually populating the calendar with appointments via the AllAppointments collection.  We have the ability to poll any type of data source here to grab appointments included within a given startDate and endDate, or like this example we generate some appointments to use and be displayed:

As you can see, when FetchData is called we will set two appointments complete with StartDate, EndDate, and Subject, then at the end call OnDataLoaded, which lets RadCalendar know it is time to display data.  After we have CustomAppointment and MyAppointmentSource in place all we need is a pretty simply viewmodel to hold an instance of MyAppointmentSource:

Easy, right? :)

Step 3 – Putting Everything Together

So far we have added a RadCalendar instance to our view and created classes for our custom appointment, appointment source, and viewmodel, so now all it takes is wiring things up and we’ll be on our way to a fully functional RadCalendar using MVVM.

First step is going to be adding a namespace reference to our view.  In this case we’re going to be utilizing the viewmodel, so we point to the viewmodels directory:

Then we can add a reference to our calendar viewmodel in the PhoneApplicationPage Resources, set that viewmodel as the datacontext of our LayoutRoot grid, and finally set the AppointmentSource of RadCalendar to our MyAppointments public property:

Now when we run the application we should see our appointments within the calendar:

Awesome, right?

Wrapping Up

One thing you may have noticed is that when selecting a date with calendar entries (or any date in general) we don’t switch windows or load new pages by default.  The reason for this is that we are giving that choice to the developer as far as how to implement the calendar functionality, so if you wanted to pop open a RadWindow, switch to a different view, or slide an agenda view into the page that choice is up to you.  If you download a trial for the RadControls for Windows Phone and check out the demo application we have an example that you can see to get an example agenda view going.  Otherwise if you check out the code from the Q2 2011 Windows Phone Webinar you can see an example using the RadPhoneApplicationFrame to closely mimic the native zooming-type behavior that is found with the default Windows Phone calendar.

Download the source code for the WP7 MVVM project here and don’t forget to grab your trial for the assemblies needed to run this demo.

Stay tuned for more!