Meet RadCalendar for Windows 8 XAML

It is our pleasure to announce the newest member of RadControls for Windows 8 XAML – RadCalendar. Following all the principles and design patterns of modern UI, RadCalendar delivers style and flexibility to your Windows Store applications.


Figure 1: RadCalendar in Month View and Year View

The component is loaded with all the needed intuitive Touch specific gestures - swipe, tap, hold, etc. enabling fast and fluid navigation through its views. It uses four depth levels (views), displaying different time spans to enable fast navigation to the desired date – Month/Year/Decade/Century. Along with the touch gestures, RadCalendar introduces convenient keyboard navigation, useful for both navigation and selection. Selection can be single or flexible and intuitive multiple, which gives you the power to select various date ranges in both touch and desktop environment.

What is RadCalendar used for?

The calendar is a frequently used control in a large variety of applications. It gives you the ability to select single or multiple dates as well as continuous date ranges with ease. There's a great deal of user scenarios that can take advantage of RadCalendar – booking applications, submit forms, personal organizing applications, TODO lists and many more.

RadCalendar Features

Besides the dates and date ranges selection, another useful feature of RadCalendar is the ability to apply different states and styles for a specific date or a set of dates. This can be achieved by defining custom state or style selectors - the CellStateSelector and CellStyleSelector properties, described in the next paragraph. These features enable RadCalendar to be used for representing different events associated with a specific date, or just for disabling a set of calendar cells.


Figure 2: RadCalendar with custom CellStateSelector and CellStyleSelector applied

RadCalendar’s appearance is fully customizable and can meet any specific application design. Most of the visual elements can be restyled directly by setting a simple property, or just by defining a simple brush associated with the desired visual part. And for applications that need a completely custom design for their calendar cells, a custom cell style selector will come to help. From simple to more advanced application scenarios, RadCalendar will help you organize your apps in just a few easy steps.

How to use RadCalendar?

So we have a highly customizable calendar with a lot of interesting features, but how can we use them? Is it hard to enable all of its functionality just like that? Do we have to write a lot of code? To shed some light on using RadCalendar’s features, let’s show some real code:

The simplest control definition:


Now let’s bring some customization to the default look-and-feel. Let’s say we want to style all the disabled date cells in the calendar (we call them ‘blackout dates’), with some custom decoration style:


Next we are going to bring out some blackout dates in the view by setting the DisplayDateStart property, which will automatically disable all the dates before the date start:


Note: Currently the only way to setup a DateTime structure (or any structure) in XAML is through Binding (limitation of the Windows Runtime).

And this is the result:


Figure 3: RadCalendar with custom blackout cell style

If we want to choose specific blackout dates with a completely custom appearance, we just have to set up our own state and style selectors. The state selector decides which dates are disabled and the style selector applies the desired custom template to them.

The StateSelector:


And the StyleSelector:


XAML:


And this is the result:


Figure 4: Defining blackout dates with custom template (13 & 15)

Do not hesitate to grab your copy of RadControls for Windows 8 XAMLtoday and play with the component for yourself. We have no doubt you will love RadCalendar and it will become an important part of your Toolbox for Windows Store applications. As always, any feedback is highly appreciated, so feel free to share it and help us build better components.