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

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:

  1. Add a change event in the calendar
  2. Get the currently selected date with the value() method
  3. Update the footer template and remove the built-in click handler from the anchor element
  4. 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>

See Also

In this article