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>