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) {
        // use "touchstart" for touch devices: $("#calendar").on("touchstart", "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) {
            //use "touchend" for touch devices: clickedItem.on("touchend", function (e) {

                e.stopPropagation();
                e.preventDefault();
            });

            if (clickedItem.length > 0) {
                var calendar = $("#calendar").getKendoCalendar();
                var clickedDate = kendo.calendar.toDateObject(clickedItem.children("a"));

                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

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