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

Getting the Date Range of the Current View in Kendo UI Calendar

Environment

Product Calendar for Progress® Kendo UI®
Version 2024.2.514

Description

When using the Calendar component, you might need to get the date range of the current view, such as:

  • From 08/01/2024 to 08/31/2024 for a month view
  • From 01/01/2024 to 12/31/2024 for a year view
  • From 01/01/2020 to 12/31/2029 for a decade view

This KB article also answers the following questions:

  • How can I determine the start and end dates of the current Calendar view?
  • Is it possible to get the visible date range in the Kendo UI Calendar?
  • How do I find the date range of the currently selected view in a Calendar?

Solution

To get the date range of the current view in a Kendo UI Calendar, use the view() and current() methods.

Below is an example for the month view:

$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");
var current = calendar.current();
var view = calendar.view();
if(view.name == "month") {
  var firstDay = new Date(current.getFullYear(), current.getMonth(), 1);
  var lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0);
  console.log(firstDay, lastDay)
}

This code snippet initializes a Kendo UI Calendar and calculates the first and last day of the month view based on the current date. You can adapt this approach for other views by adjusting the calculation of firstDay and lastDay accordingly.

For a complete example and to see the code in action, check the following Dojo demo:

    <div id="calendar"></div>
    <script>
      $("#calendar").kendoCalendar();

      var calendar = $("#calendar").data("kendoCalendar");
      var current = calendar.current();
      var view = calendar.view();
      if(view.name == "month") {
        var firstDay = new Date(current.getFullYear(), current.getMonth(), 1);
        var lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0);
        console.log(firstDay, lastDay)
      }
    </script>

See Also

In this article