This is a migrated thread and some comments may be shown as answers.

Getting list of dates in view for Kendo UI calendar

1 Answer 214 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Azzlack asked on 20 Apr 2014, 11:29 PM
(Crosspost from

How can I get a list of the dates currently visible in Kendo UI Calendar? For example, the view for April 2014 includes dates from 30th March to 10th May, and I need a reliable way to get a list of those dates, even when changing month to June, for example.

1 Answer, 1 is accepted

Sort by
Georgi Krustev
Telerik team
answered on 22 Apr 2014, 12:03 PM
Hello Azzlack,

You can calculate start and end date of shown month based on a date visible in current month. Check this demo, which shows how to do this.

Georgi Krustev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
commented on 31 Oct 2022, 09:53 AM

How do you get the START and END date while navigating?!?


Patrick | Technical Support Engineer, Senior
Telerik team
commented on 31 Oct 2022, 06:34 PM

I have answered this issue in a ticket opened by yourself, but to help share with the community:

One way you can get the available Start and End dates on a view while navigating is to utilize the navigate event.  Then, based on the view and if there is a min or max, return the specific results:

        var calendar = $("#calendar").kendoCalendar({
          value: new Date(),
          min: new Date(2022, 9, 10),  //Added min for testing
          componentType: "modern",
          navigate: function(e){

            //Get Focused Date
            var currentDate = e.sender.current(); 

            //Get the View
            var view = e.sender.view();
            //Using View's first method, get the first date of the view
            var first = view.first(currentDate);

            //if it is in month view, get the earliest Sunday
            if( == "month"){
              while(first.getDay() != 0) {
                first.setDate(first.getDate() - 1);

              //reference the first for last
              var last = new Date(first);

              //and add 41 days for the last day on view
              last.setDate(last.getDate() + 41);

            } else {

              //Use the view's last method to get the last available day of the view
              last = view.last(currentDate);

            //if there is a min, use that instead of the first day
            if(e.sender.min() > first){
              first = e.sender.min();

            //If there is a max, use that instead of last day
            if(e.sender.max() < last){
              last = e.sender.max();

            console.log("START: " +  first);
            console.log("END: " + last);

Please take a look at the following Progress Kendo UI Dojo which demonstrates the above.

Asked by
Top achievements
Rank 2
Answers by
Georgi Krustev
Telerik team
Share this question