Selecting a date range in calendar

[mary]

Hi
Is there a way to enable date range selection in the calendar?
when the user clicks on 2 dates I want to select all dates between the 2 dates selected.  I can handle it in the ondateselected but that causes a calls to the dateselected handler as each date is selected (the remove_dateselected() method does not seem to remove the handler)

thanks

[Vlad]

Hi mary,

I've made for you small example to illustrate you how to achieve range selection with RadCalendar. You can find the demo attached.

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[mary]

Hi Vlad
Thanks.  The sample mostly works but there is a problem when the user selects 2 dates not in the current month (eg.  If October is displayed and the first week of November is also visible and the user select 2 days in November), the following script error occurs:
Microsoft JScript runtime error: 'this.RadCalendar.Selection' is null or not an object

Do you know what could be causing this error?

Thanks

[Vlad]

Hi mary,

You can disable cross months selection in my example if you add following else statement:

    if (startDate[0] == endDate[0] && startDate[1] == endDate[1])
    {
        ...
    }
    else
    {
        sender.unselectDates(selectedDates);
    }

Sincerely yours,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[mary]

Hi Vlad,
I dont want to disable it as I want the user to be able to select across months.  Is there any other way to stop this error?

[Vlad]

Hello mary,

You can use my example as a base and extend it with desired functionality. Just let me know if you have any problem with the implementation.

Regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Levi]

After spending a considerable amount of time figuring out how to get selected dates between two months, I get the same error mentioned by mary. This seems like a bug to me. Can you help me? t works perfect if you don't select a date in the next month. Far as I can tell the array contains the correct set of dates. I have an alert so you can see it. Currently my code below only supports the end date occuring after the start date.

function days_between(date1, date2) {

            // The number of milliseconds in one day

            var ONE_DAY = 1000 * 60 * 60 * 24

            // Convert both dates to milliseconds

            var date1_ms = date1.getTime()

            var date2_ms = date2.getTime()

            // Calculate the difference in milliseconds

            var difference_ms = Math.abs(date1_ms - date2_ms)

            // Convert back to days and return

            return Math.round(difference_ms / ONE_DAY)

        }

        function RadCalendar1_DateClick(sender, args) {

            var shouldResetMultiSelect = false;

            if (!sender.get_enableMultiSelect()) {

                sender.set_enableMultiSelect(true);

                shouldResetMultiSelect = true;

            }

            var selectedDates = sender.get_selectedDates();

            if (selectedDates.length == 1) {

                var datesToSelect = new Array();

                var startDate = selectedDates[0];

                var endDate = args.get_renderDay().get_date();

                var dStartDate = new Date(startDate[0], startDate[1], startDate[2]);

                var dEndDate = new Date(endDate[0], endDate[1], endDate[2]);

                var iDateDiff = days_between(dStartDate, dEndDate);                

               

                if (1==1) {

                    if (1==1) {

                        var tempDate = new Date(startDate[0], startDate[1], startDate[2]);

                        

                        for (var i = 0; i < iDateDiff; i++) {

                            var addDate = new Date(tempDate.getYear(), tempDate.getMonth() - 1, tempDate.getDate());                            

                            addDate.setDate(tempDate.getDate() + i);                            

                            var newDate = new Array(addDate.getYear(), addDate.getMonth() + 1, addDate.getDate());

                            

                            Array.add(datesToSelect, newDate);

                        }

                        

                        alert(datesToSelect.toString());

                        sender.selectDates(datesToSelect);

                    }

                    else {

                        var i = startDate[2];

                        var j = 1;

                        while (i != endDate[2] + 1) {

                            var newDate = new Array(startDate[0], startDate[1], startDate[2] - j);

                            alert(newDate);

                            Array.add(datesToSelect, newDate);

                            i--;

                            j++;

                        }

                        sender.selectDates(datesToSelect);

                    }

                }

            }

            else {

                sender.unselectDates(selectedDates);

            }

            if (shouldResetMultiSelect) {

                sender.set_enableMultiSelect(false);

            }

        }

    </script>

[Radoslav]

Hi Levi,

I am sending you the modified version of the example. Please check it out and let me know if it covers your requirements.

Looking forward for your reply.

Sincerely yours,
Radoslav
the Telerik team

[Levi]

This doesn't actually work when the dates are more than one month apart. I was however able to write something that works with any dates (by using regular date addition instead of relying on the arrays). It is much less code this way too. It wouldn't have been possible without studying the sample you sent, so thank you for that. I see now that the bug occurs when you try to select multiple dates in bulk that belong to more than one month. I see that you looped through the dates and selected them individually which solved the bug I was having.

[Jean-Pascal van der Endt]

Hi Radoslav,

I'm using the example script you posted in this thread on 7 July 2010. I'm having some problems with it though:

1. Consider displaying November 2010 in the calendar. The first date shown at the top left is Sunday 31 October 2010, right? If I click on that day, and then click any date that is actually in November, the script goes into an infinite loop. This problem doesn't happen with other dates in different months. it seems.

2. Again, showing November 2010. Click on Thursday 2 December 2010, then on Tuesday 30 November 2010. (I know this is selecting the date range backwards, but this seems to work okay for other date ranges). Strangely, only 30 and 2 get selected; 1 December is unselected.

3. Clicking twice on any date enters an infinite loop.

4. When a date range is selected, and the page is refreshed, the calendar still knows the selected date range, but the dates aren't rendered as selected. Incidentally, when you try this in Firefox, those dates are rendered as selected after you hover over them.

5. EDIT: After the date range selection, when you call get_selectedDates() on the calendar, the result doesn't contain the last date in the selection.

I hope you can provide the community with an updated script that solves these problems.

Moreover, the whole concept of selecting continuous date ranges (as opposed to mere multi select) seems to be generic functionality. Are there any plans to make this part of the product by default?

Thank you in advance for your support.

[Levi]

Jean,

I have a fully working solution that I can send you if you like. Although the performance is poor when selecting a large number of dates, so I ended up abandoning the Telerik calendar and using a jquery based calendar instead. I would recommend doing the same if you are planning on having users select more than 5 months worth of dates, etc. Otherwise it may work in your case. 

[Sebastian]

Hi guys,

You may be happy to know that we will introduce built-in range selection for RadCalendar for the Q3 2010 release, expected in the middle of November. This integrated date range selection will also include performance optimizations when selecting large number of days. I encourage you to try out the Q3 2010 Beta release which will come out in the second half of October and share your feedback with us.
 
Kind regards,
Sebastian
the Telerik team

[Jean-Pascal van der Endt]

Hello Sebastian,

That is very good news indeed. I'm looking forward to trying the new release. Thank you for the quick response.