Dynamically Display the Selected Calendar Dates
Environment
Product Version | 2017.3 1026 |
Product | Progress® Telerik® UI Calendar for ASP.NET Core |
Description
How can I make the Calendar dynamically display the selected dates in another widget or container?
Solution
- Enable the multiple selection of the Calendar through its
selectable
property (set it to"multiple"
). - Subscribe for the
change
event of the Calendar. - Update a preferable container by appending the selected values of the Calendar with
span
elements.
<div class="demo-section k-content" style="text-align: center;">
<div id="result" style="width:300px; margin:0 auto;"></div>
<div id="calendar"></div>
</div>
<script>
$(document).ready(function() {
$("#calendar").kendoCalendar({
selectable: "multiple",
change: onChange
});
})
function onChange(e) {
var dates = e.sender.selectDates()
updateResult(dates);
}
function updateResult(dates) {
if (dates.length > 0) {
var result = "";
for (var i = 0; i < dates.length; i++) {
var newdate = kendo.toString(dates[i], "yyyy/MM/dd");
result += "<span class='selectedName'>" + newdate + "</span>";
}
} else {
result = "No dates selected.";
}
$("#result").html(result);
}
</script>
<style>
#result {
padding-bottom: 15px;
}
#result:after {
content: '';
display: block;
clear: both;
}
.selectedName {
padding: 5px 10px;
background: #aaa;
color: white;
float: left;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
</style>