New to Kendo UI for jQuery? Download free 30-day trial

Select or Deselect Dates with Click Only


Product Progress® Kendo UI® Calendar for jQuery
Product Version Created with version 2018.1.226



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


  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>

    $(document).ready(function () {
        // create Calendar from div HTML element
            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 = $("td[role='gridcell']");

            // prevent click event for item elements
            clickedItem.on("click", function (e) {
            //use "touchend" for touch devices: clickedItem.on("touchend", function (e) {


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

                var selectedDates = calendar.selectDates();

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



See Also

In this article