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.

image

image

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.

image

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.

image

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.

image

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

Advertisements

One thought on “Get Multiple Selected Dates with WebCalendar

  1. Pingback: Intersoft Solutions Newsletter – October 2010 « ImanIP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s