New to Kendo UI for jQuery? Start a free 30-day trial
Select or Deselect Dates with Click Only
Environment
| Product | Progress® Kendo UI® Calendar for jQuery |
| Product 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
- Prevent the default click action for the Calendar dates.
- Get the clicked date and add it to a collection of the selected dates.
- Set the selected dates for the Calendar by using the
selectDatesmethod.
<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-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>