Edit this page

Select or Deselect Dates with Click Only

Environment

Product Progress Kendo UI Calendar
Progress Kendo UI version Created with version 2018.1.226

 

Description

How can I select or deselect multiple dates only by clicking them and without using the Ctrl key?

Solution

  1. Prevent the default click action for the Calendar dates.
  2. Get the clicked date and add it to a collection of the selected dates.
  3. Set the selected dates for the Calendar by using the selectDates method.
<div id="calendar"></div>

<script>
    $(document).ready(function () {
        // create Calendar from div HTML element
        $("#calendar").kendoCalendar({
            selectable: "multiple"
        });


        $("#calendar").on("mousedown", "td", function (e) {

            // get item if the user clicked on an item template
            var clickedItem = $(e.target).closest("td[role='gridcell']");

            // prevent click event for item elements
            clickedItem.on("click", function (e) {
                e.stopPropagation();
                e.preventDefault();
            });

            if (clickedItem.length > 0) {
                var calendar = $("#calendar").getKendoCalendar();
                var clickedDateString = clickedItem.children("a")[0].title;
                var clickedDate = new Date(clickedDateString);

                var selectedDates = calendar.selectDates();

                if (clickedItem.hasClass("k-state-selected")) {
                    // if date is already selected - remove it from collection
                    selectedDates = $.grep(selectedDates, function (item, index) {
                        return clickedDate.getTime() !== item.getTime();
                    });
                } else {
                    selectedDates.push(clickedDate);
                }


                calendar.selectDates(selectedDates);
            }
        });


    });
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy