New in ClientUI 4: Versatile Calendar Control

The recently released 2010 R2 features ClientUI 4, a major version of our flagship development suite for the Silverlight and WPF platforms. ClientUI 4 is strongly focused in three areas: rich content and UI controls, advanced input controls, and fundamental navigation controls. For further information about ClientUI 4, please click here.

Introducing UXCalendar

One of the controls introduced in ClientUI 4 is UXCalendar, a sophisticated calendar control featuring multiple month views, multiple date selection feature and data binding support using MVVM design pattern.

UXCalendar sports a sleek yet authentic style and user interface, complete with today link, navigational buttons, week number and adjacent days. The following illustration shows what you get when you dropped an instance of UXCalendar in your Visual Studio or Blend designer surface.

We designed the UXCalendar to be ultimately lightweight and high performance, despite of its rich user interface. For instances, when clicking the Calendar Header, you will see responsive zoom-in and zoom-out transition similar to the one in Windows 7.

What’s really powerful is the multiple month views capability in UXCalendar – with the sleek user interface and styles consistently applied. You can easily set how many calendars to display by setting the CalendarViewCount property to the desired number. See the multiple month views interface in the following illustration.

Suffice to say, UXCalendar is the ultimate, cross-platform solution for all your calendaring needs. It also features built-in commands and flexible key gestures, multiple selection (and even multiple range), MVVM data binding for events source, display range customization, culture and localization support, and many more. Click here to learn more about UXCalendar.

Customizing UXCalendar Layout

UXCalendar is uniquely built on solid architecture that leverages our ItemsControl content model. This means that each calendar that represents an item in the UXCalendar can be easily and flexibly styled according to your need. You can even completely change the way it is arranged, let’s say, showing the calendars in 2 columns and 1 row, or 3 columns and 2 rows.

By default, the layout of UXCalendar is using a horizontal StackPanel. You can override this default layout through the ItemsPanel property of the UXCalendar.

In this blog post, I will show you how to create a UXCalendar with multiple month views displayed in 3 columns and 2 rows. Please follow the steps below:

1. Drag and drop an instance of UXCalendar to the designer surface. You can use either Visual Studio 2010 or Expression Blend 4.
   
   1 2	<Intersoft:UXCalendar Name="uXCalendar1" HorizontalAlignment="Center" VerticalAlignment="Center" />

2. Show six months calendar view by setting the CalendarViewCount property to 6.
   1 2	<Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6" HorizontalAlignment="Center" VerticalAlignment="Center" />

3. And now the final step, customize the ItemPanels of the UXCalendar. I’m using Intersoft’s WrapPanel and set the MaxWidth property to 600 to get the 3 x 2 display configuration.
   1 2 3 4 5 6 7 8

   <Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6" HorizontalAlignment="Center" VerticalAlignment="Center">     <Intersoft:UXCalendar.ItemsPanel>         <ItemsPanelTemplate>             <Intersoft:WrapPanel MaxWidth="600" />         </ItemsPanelTemplate>     </Intersoft:UXCalendar.ItemsPanel> </Intersoft:UXCalendar>

4. Save and run the project in the browser. You should get the results such as shown in the following illustration.

Truly simple and straightforward, isn’t it?

In this short post, you have now learned the basics of UXCalendar, and how to customize its layout arrangement. You can play around with the UXCalendar features through the properties, or try some readily designed samples here. To see all available features, please see UXCalendar Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXCalendar, feel free to post them to our community forum.

Best Regards,

Budianto Muliawan