Show the Selected Date in the Calendar Footer
Environment
Product | Progress® Kendo UI® Calendar for jQuery |
Product Version | 2019.2.514 |
Description
I would like to show the currently selected date in the footer of the calendar and navigate to it when clicked.
Solution
To implement a timezone we need to take care of the following:
- Add a
change
event in the calendar - Get the currently selected date with the
value()
method - Update the footer template and remove the built-in click handler from the anchor element
- Add your own click handler that calls the
navigate()
method and navigates to the selected date
change: function(e){
var calendar = this;
var selectedDate = calendar.value();
var footer = calendar.footer(selectedDate);
calendar.element.find(".k-footer .k-nav-today").html(footer).attr("title", kendo.toString(selectedDate, "D",calendar.options.culture)).off("click").on("click", function(e){
e.preventDefault();
calendar.navigate(selectedDate);
});
}
<div id="example">
<div class="demo-section k-content" style="text-align: center;">
<h4>Pick a date</h4>
<div id="calendar"></div>
</div>
<script>
$(document).ready(function() {
// create Calendar from div HTML element
$("#calendar").kendoCalendar({
value: new Date(),
footer: "Selected - #: kendo.toString(data, 'd') #",
change: function(e){
var calendar = this;
var selectedDate = calendar.value();
var footer = calendar.footer(selectedDate);
calendar.element.find(".k-footer .k-nav-today").html(footer).attr("title", kendo.toString(selectedDate, "D", calendar.options.culture)).off("click").on("click", function(e){
e.preventDefault();
calendar.navigate(selectedDate);
});
}
});
});
</script>
</div>