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.
   

   <Intersoft:UXCalendar Name="uXCalendar1"
   HorizontalAlignment="Center" VerticalAlignment="Center" />

2. Show six months calendar view by setting the CalendarViewCount property to 6.

   <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.

   <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

Using Multiple Calendars in WebCalendar

Continuing my posts about Intersoft WebCalendar control for ASP.NET, I have described how to configure the holiday collection in WebCalendar, and how to get selected dates and perform multiple selection. If you missed the blog posts, please check it out here.

In this post, I will show you about how to configure WebCalendar to multiple calendars in multiple columns. Let’s start configuring the WebCalendar.

Unlike similar calendar controls, WebCalendar enables you to display multiple calendars. This behavior is controlled by the NumberOfCalendarDisplayed property.

When multiple calendars feature is enabled, only 1 calendar will be active when users switched to the year view or decade view.

The following screenshots show the multiple calendars feature in WebCalendar using different type of view mode.

As you can see from the above screenshots, WebCalendar’s default behavior is to display the multiple calendars in one column. To enable multiple columns option in WebCalendar, we can customize the CalendarItemWidth property to set the width of each calendar, and the Width property to control the WebCalendar’s width.

As an example, I will show you how to display a whole year calendar in 4×3 configurations.
Please follow the steps below.

1. Set the NumberOfCalendarDisplayed property to 12.
2. Set the CalendarItemWidth to 170px. The CalendarItemWidth is 1/4 from the entire WebCalendar’s width.
3. Set the CalendarItemHeight to 180px. The CalendarItemHeight is 1/3 from the entire WebCalendar’s height.
4. Set the Width property to 680px. We can get the Width property value from multiply the total column with CalendarItemWidth’s value.
5. Set the Height property to 540px. We can get the Height property value from multiply the total row with CalendarItemHeight’s value.

Here is the result from the above WebCalendar configurations.

Now you have learned how to use WebCalendar to display multiple calendars in multiple columns. If you have any question, feedbacks or comments, feel free post them to our community forum. You can also check the online demos of WebCalendar here.

Warm Regards,
Budianto Muliawan
Intersoft Software Architect

Get Multiple Selected Dates with WebCalendar

Calendar is a control that looks simple but very useful in desktop or web development, so there is no question why there are lots of calendar control out there. Those calendar controls usually can select single date or can return single date only.

In certain scenario, there is a requirement where you would like to be able to perform multiple selections or get multiple dates from the calendar control. For example in scheduling scenario, there is a condition that the event will be a range event or occur in custom date (the dates does not align), and many other scenarios that require more than just single selection or single date.

To overcome the above scenarios, WebCalendar control is implemented with “MultipleSelection” feature which can give you a range of date and multiple selections. In this post, I will show you how to enable this feature.

For your information, WebCalendar is part of WebEssentials suite for ASP.NET which contains 8 new controls such as WebAccordion, WebProgressBar, WebListBox, etc. For further information about WebEssentials can be found here.

Enable MultipleSelection in WebCalendar

The default selection behavior in WebCalendar is single selection. In single selection, you can access WebCalendar’s selected date value in SelectedDate property. In multiple selections, you can access WebCalendar’s slected dates value in SelectedDates collection property.

To enable MultipleSelection in WebCalendar, set EnableMultipleSelection property to True.

The following images show SelectedDate, SelectedDates and EnableMultipleSelection property in WebCalendar control.

When multiple selections feature is enabled, you can highlight multiple dates in WebCalendar using mouse. The behavior is the same with performing multiple selections in desktop OS (press, hold and drag the mouse).

Actually, you can also perform the multiple selections using keyboard. In order to use the keyboard action, EnableKeyboardSupport property in WebCalendar should be enabled. You will get the comprehensive multiple selection behavior in WebCalendar with the combination of mouse and keyboard. Like desktop OS, you can highlight WebCalendar’s date with click and drag using mouse, use CTRL, SHIFT, or CTRL + SHIFT to get random selections.

When keyboard support is enabled, you can also start using the directional keyboard keys to move between months and dates in WebCalendar. [Enter] key is used to select a date and [Space] key is used to cycle through the available views (Day, Month, Year) in WebCalendar.

Some illustration of multiple selections in WebCalendar is shown in the following screenshots and video.

For your information the multiple selections feature in WebCalendar is designed to work in Day view mode only.

Get Multiple Selected Dates from WebCalendar

In this post sample, I will show you how to get the previous/old selected dates and the latest/new selected dates from WebCalendar through OnSelectedDateChanged client side events and display the information for user. OnSelectedDateChanged client side event is the client side event in WebCalendar that will be triggered when WebCalendar’s SelectedDate or SelectedDates property value is changed.

First, enable WebCalendar’s EnableMultipleSelection and EnableKeyboardSupport property by set the property value to True then start implementing OnSelectedDateChanged client side event.

The following screenshots show the implementation of OnSelectedDateChanged client side event in WebCalendar.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
	var WebCalendar1 = ISGetObject(controlId); 

	return true;
}

Notice that OnSelectedDateChanged client side event has 3 parameters:

• controlId is the id of the WebCalendar control
• oldDates is the collection of the old selected dates
• newDates is the collection of the new selected dates

Next, I will write simple code that will get the old and new selected date and put them as the div element’s innerHTML like illustrated in the following sample.

Here is the result after the above code implementation.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
    var WebCalendar1 = ISGetObject(controlId); 

    var oldDatesDiv = document.getElementById("oldDatesDiv");	    var newDatesDiv = document.getElementById("newDatesDiv");

    for (var i = 0; i < oldDates.length; i++)
	oldDatesDiv.innerHTML += oldDates[i] + "<br />";
	         for (var j = 0; j < newDates.length; j++)
	newDatesDiv.innerHTML += newDates[j] + "<br />";

    return true;
}

Here is the result after the above code implementation.

In this post, you have learned how to enable multiple selections and get multiple selected dates in WebCalendar. If you have any question, feedbacks or comments, feel free post them to our community forum.

 

Best Regards,

Budianto Muliawan

How to Configure Holiday in WebCalendar

Since Intersoft WebUI Studio 2010 R1, there is a new suite called WebEssentials for ASP.NET. WebEssentials contains 8 new controls in this release. WebCalendar control is one of the new controls which are part of WebEssentials. Further information about WebEssentials can be found here.

In business applications that use calendar user interface to create appointments or events, it is common to show the days which are holiday, and the days which are working days. This is important to avoid arranging meetings or events in undesired schedule. Our new WebCalendar control provides built-in features that let you easily define the holidays, which will be consequently marked in different color. In this post, I will show you how to setup the holiday in WebCalendar.

You can specify holiday in WebCalendar’s Holidays collection property as illustrated in the following screenshot.

Click on the Holidays property to open Holidays collection editor, as illustrated in the following screenshot.

Here are several points that should be notes in the Holidays Collection property.

• Name
  The name of the holiday
• Description
  The description of the holiday. This is the value of the WebCalendar’s date tooltip. Date The date of the holiday
• IsGeneral
  The property that indicates whether date with the same specified date and month even though it is not in the same year will be set as a holiday. For example, you can specify IsGeneral to True when the specified holiday is Christmas Day.

Input the holiday value and click the Add button to add the new holiday to WebCalendar. Repeat the same steps to add another holiday.

Save and run the page after you have finished specifying the holiday to WebCalendar. You will have something like the following screenshot.

Notice that in WebCalendar, the holiday is marked with red color. This is because WebCalendar has a style which will be assigned to each of the holiday. The style property is called HolidayStyle. The default style for holiday in WebCalendar is marked the date with red color. However you can custom your own holiday style too by customizing the HolidayStyle property.

In this post you have learned how to create holiday in WebCalendar. For more information about WebCalendar and its feature, please click here. You can also play with WebCalendar samples from our live demos. If you have feedbacks, questions or suggestions, feel free to post them in the Community Forum.

Cheers,
Budianto Muliawan

Introducing WebAccordion Design-time Wizard

There are lots of new ASP.NET, Silverlight and WPF controls introduced in Intersoft WebUI Studio 2010. One of the new ASP.NET controls is WebAccordion, which is part of WebEssentials Suite. For your information, WebEssentials contains 8 new controls in this release. Further information about WebEssentials can be found here.

In this post, I will show you about how to create WebAccordion’s item using the design-time wizard and how the global and individual item settings can help you quickly customize the WebAccordion control.

Creating WebAccordion using the Design-time Wizard

The screenshot below shows WebAccordion control with the smart tag after it is added to ASP.NET page. You can add WebAccordion control to ASP.NET page by drag and drop or double click on the WebAccordion control from Visual Studio toolbox.

Usually when you add an item for a control, you access the control’s properties window, find and click on its ItemCollection property, input the item value, specify the item settings, and click add button to add the new item to the control, and then repeat the same steps to add another item.

With WebAccordion’s design-time wizard, adding new item is much easier. You can click on the “Add New Item” visual hint in WebAccordion control to open the design-time wizard dialog box which is described in the following images.

In the design-time dialog box, you can specify the WebAccordion’s item properties and settings such as HeaderText, HeaderContentMode, ContentMode and ContentURL.

The first image in the following describes how to add a WebAccordion’s item using “Inline” mode for the HeaderContentMode and ContentMode property. The second image shows adding content to WebAccordion’s header and content in design-time.

There are several points to note about the WebAccordion’s item properties:

• “Inline” in HeaderContent or ContentMode property means that you can input the content directly from design-time.
• “IFrame” in ContentMode property means that the content will be an iframe. The url of the iframe is supplied from ContentURL property.
• “Default” in HeaderContentMode and ContentMode property means that the WebAccordion’s item will follow the specified settings in ItemSettings property.

ItemSettings property is the default settings for entire WebAccordion’s items. However you are still able to configure WebAccordion’s item individually. This is what I called global and individual settings in WebAccordion.

Understanding WebAccordion Global and Individual Settings

You can use global or individual setting to configure WebAccordion’s item. Global settings are useful when you have numerous WebAccordion’s items with same settings, so you can quickly setup the WebAccordion’s items settings without have to specify it 1 by 1 in each of the Item. Individual settings are useful if you would like to customize a specific WebAccordion’s item without affecting the other items.

The individual item settings configuration can be found inside each of the item’s property as describe in the first image below. The second image describe about the global item settings in ItemSettings property. As you can see, the ContentMode property is set to “Inline” so whenever WebAccordion’s item ContentMode is set to “Default” in WebAccordion item’s property, like illustrated in the first image. The WebAccordion item will use “Inline” as the ContentMode value.

Hopefully this blog post gives you a better understanding about using WebAccordion’s design-time wizard and WebAccordion’s global and individual item settings. To learn about the features available in WebAccordion, you can explore the online demos here.

If you have any feedback, questions or suggestions, feel free to post to Intersoft community forum.

 

Budianto Muliawan

Software Architect