Calendar multiselect range problem

[Keith]

I have a calendar that I would like to allow users to select a range of dates, but I want them to have to hold [shift] to select a second date to define a range.

The ConsecutiveClick setting works almost like I want, except the second click should be required to be [shift]+click and the click without the shift key should always be considered as the anchor point for the subsequent [shift]+click.

I set EnableMultiSelect="true" and RangeSelectionMode="OnKeyHold", but the user can still click and select multiple dates without pressing the shift key.

Basically what I want is single select mode unless the shift key is pressed. If the shift key is pressed, then I want to allow the user to select a second date that will define a range of dates (not individual days, but consecutive days). This would mimic the default behavior of Windows.

The scenario I am envisioning goes like this:
Calendar is rendered with May 8 selected (it is today after all)
The user clicks May 17.
May 17 is selected and May 8 is deselected.
User then clicks May 27.
May 27 is selected and May 17 is deselected.
User then presses [shift] and clicks May 29.
May 27-May 29 is selected as a range.
User (still holding shift key) clicks May 31.
May 27-May 31 is selected as a range.
User (still holding shift key) clicks May 8.
May 8-May 27 is selected as a range. (Note: The date selected without the shift key being held or the default date, becomes the anchor point for all range selections and only the last [shift]+click is recognized as a date range selection)
At this point:
If the user releases shift key and clicks another date, it becomes the "anchor" and the range is deselected;
OR
If the user releases the shift key and presses it again before clicking a date, the original "anchor" date remains valid and the new [shift]+click defines the range.

I hope I've explained what I would like.

Is there some telerik-fu that I can employ to get this kind of behavior?

[Keith]

I may have solved the problem. A little bit of testing will be in order to ensure there is no detrimental effects from cancelling the onDateClick event, but it seems to give the desired effect.

var calAnchorDate = new Date();
function onDateClick(sender, eventArgs) {
    var radCalendar1 = $find("<%=CalDaysOff.ClientID %>");
    if (!eventArgs._domEvent.shiftKey) {
        calAnchorDate = new Date(eventArgs.get_renderDay().get_date());
        radCalendar1.set_datesInRange(calAnchorDate, calAnchorDate);
    } else {
        radCalendar1.set_datesInRange(calAnchorDate, new Date(eventArgs.get_renderDay().get_date()));
    }
    eventArgs.set_cancel(true);
}

As you can see, I set the range manually based upon whether or not the shift key is being pressed. I store the anchor date when the shift key isn't pressed and set it as the range start when the shift key is pressed.

Initially I was confused by the fact that programmatically setting the dates in the range fires events that eventually remove the css formatting from the last clicked date. Clicking a selected date causes it to be deselected, so the event must be cancelled to prevent the manually set date from being programatically deselected, even though it isn't really deselected, just the css formatting is removed. This can be verified by checking the values of get_rangeSelectionStartDate and get_rangeSelectionEndDate.

Can someone verify that this will not break other functionality?

As an aside, it would be really cool if this control also had a mousebuttondown + drag setting so the user could click the first date and drag the cursor to select a range of dates.

[Vasil]

Hello Keith,

You can clear the selected days on click if the shift is not hold. Since the onDateClick is fired before the new selection, in normal click, you will clear the old selected dates, and the new will be applied later.
Here is an example code:

<script type="text/javascript">
    function onDateClick(sender, eventArgs)
    {
        if (!eventArgs._domEvent.shiftKey)
        {
            sender.unselectDates(sender.get_selectedDates());
        }
    }
</script>
<telerik:RadCalendar runat="server" ID="RadCalendar1" RangeSelectionMode="OnKeyHold" >
    <ClientEvents OnDateClick="onDateClick" />
</telerik:RadCalendar>

Regards,
Vasil
the Telerik team

[Keith]

That may work as well, I will have to check to be sure. Using this, will the first date selected without holding shift always be the anchor date for selecting a range?