Selecting a date range in calendar

13 posts, 0 answers
  1. mary
    mary avatar
    34 posts
    Member since:
    Apr 2008

    Posted 02 Oct 2008 Link to this post

    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

  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 02 Oct 2008 Link to this post

    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.
  3. mary
    mary avatar
    34 posts
    Member since:
    Apr 2008

    Posted 02 Oct 2008 Link to this post

    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
  4. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Oct 2008 Link to this post

    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.
  5. mary
    mary avatar
    34 posts
    Member since:
    Apr 2008

    Posted 06 Oct 2008 Link to this post

    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?

  6. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Oct 2008 Link to this post

    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.
  7. Levi
    Levi avatar
    53 posts
    Member since:
    Jun 2010

    Posted 06 Jul 2010 Link to this post

    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>
  8. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 07 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Levi
    Levi avatar
    53 posts
    Member since:
    Jun 2010

    Posted 24 Jul 2010 Link to this post

    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.
  10. Jean-Pascal van der Endt
    Jean-Pascal van der Endt avatar
    48 posts
    Member since:
    Jul 2010

    Posted 06 Oct 2010 Link to this post

    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.
  11. Levi
    Levi avatar
    53 posts
    Member since:
    Jun 2010

    Posted 06 Oct 2010 Link to this post

    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. 
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 06 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Jean-Pascal van der Endt
    Jean-Pascal van der Endt avatar
    48 posts
    Member since:
    Jul 2010

    Posted 06 Oct 2010 Link to this post

    Hello Sebastian,

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