Getting list of dates in view for Kendo UI calendar

[Azzlack]

(Crosspost from https://stackoverflow.com/questions/23188715/getting-list-of-dates-in-view-for-kendo-ui-calendar)

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.

[Georgi Krustev]

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.

Regards,
Georgi Krustev
Telerik

 

 

[Saul]

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

 

[Patrick | Technical Support Engineer, Senior]

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(view.name == "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);
          }
        }).data("kendoCalendar");

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