Select a Range of Dates

Environment

Product Progress Kendo UI Calendar
Progress Kendo UI version Tested up to version 2017.3.1026

 

Description

How can I select a range of dates in the Kendo Calendar widget?

Solution

Once the user chooses both the end and start dates, select the dates in the selected range by using the selectDates method.

    <label>Start:</label>

    <input id='start'/>

    <label>End:</label>
    <input id='end'/>
    <br/>
    <div id='calendar' style='margin:10px'></div>

    <script>
      Date.prototype.addDays = function (days) {
        var dat = new Date(this.valueOf());
        dat.setDate(dat.getDate() + days);
        return dat;
      }

      $('#start').kendoDatePicker({
        change: rangeSelection
      });

      $('#end').kendoDatePicker({
        change: rangeSelection
      });

      $('#calendar').kendoCalendar({
        selectable:'multiple'
      });

      function rangeSelection() {

        var start = $('#start').data('kendoDatePicker');
        var end = $('#end').data('kendoDatePicker');
        var calendar = $('#calendar').data('kendoCalendar');

        if (start.value() && end.value() && start.value().getTime() <= end.value().getTime()) {
          debugger
          var datesToSelect = [];
          var daysToAdd = 0;
          while (true) {
            var dateToAdd = start.value().addDays(daysToAdd);
            if (dateToAdd.getTime() >= end.value().getTime()) {
              datesToSelect.push(dateToAdd);
              break;
            }
            datesToSelect.push(dateToAdd);
            daysToAdd++;
          }

          calendar.selectDates(datesToSelect);
        }
      }

    </script>

See Also

In this article
Not finding the help you need? Improve this article