DatePicker

[Sailaja]

Hi,
I am using Kendo MVC DatePicker. I am trying to disable all the dates except few for the user to select. It is working fine on initial view. When I change the month the dates are getting enabled. I not able to catch the change event for month.(when month is changed).Below is the code. Can you please let me know if you have questions.


<div id="email-settings">
    <div style="margin-top: 59px; margin-left: 180px">
        @(Html.Kendo().DatePicker()
                .Name("calendar")
                .Value(DateTime.Today)
                .Footer(" ")
                .Min(DateTime.Today)
                 .Depth(CalendarView.Month)

                .Events(e =>
                {
                    e.Open("Checkthis");
                    e.Change("Calender_change");
                    e.Close("Checkthis");

                })
                  .MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
                                                "#= data.value #" +
                              "# } else { #" +
                                           "<div class='disabled'>#= data.value #</div>" +

                                "# } #")        
                
 
            )
    </div>
</div>
<script>

   
    var today = new Date(),
        events = [
            +new Date(today.getFullYear(), today.getMonth(), 29),
           +new Date(today.getFullYear(), today.getMonth(), 28)
        ];


    function Checkthis(e) {

        $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
        $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
    }
    function Calender_change(e) {
     
        $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
        $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
    }
   
</script>

[Sailaja]

Just in case if anyone needs found the answer ...needed to bind the navigate.

<div id="email-settings">
    <div style="margin-top: 59px; margin-left: 180px" >
        @(Html.Kendo().DatePicker()
                .Name("calendar")
                 .Footer(" ")
                .Min(DateTime.Today)
                .Depth(CalendarView.Year)
               .Events(e =>
                {
                    e.Open("Checkthis");
                    e.Change("Calender_change");
                    e.Close("Checkthis");

                })
                  .MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
                                                "#= data.value #" +
                              "# } else { #" +
                                           "<div class='disabled'>#= data.value #</div>" +

                                "# } #")        
                
 
            )
    </div>
<div>  <button id="open" class="k-button">Open</button> or <button id="close" class="k-button">Close</button> the calendar</div>
          
        
</div>


<script>
    $(document).ready(function () {
        $("#calendar").closest(".k-widget")
                        .attr("id", "datepicker_wrapper");

        var datepicker = $("#calendar").data("kendoDatePicker");

        var setValue = function () {
            datepicker.value($("#value").val());
        };

        $("#enable").click(function () {
            datepicker.enable();
        });

        $("#disable").click(function () {
            datepicker.enable(false);
        });

        $("#readonly").click(function () {
            datepicker.readonly();
        });

        $("#open").click(function () {
            datepicker.open();
        });

        $("#close").click(function () {
            datepicker.close();
        });

        $("#value").kendoDatePicker({
            change: setValue
        });

        $("#set").click(setValue);

        $("#get").click(function () {
            alert(datepicker.value());
        });
    });
</script>



<script>
    var isCalendarInitialized = false;

    var today = new Date(),
        events = [
            +new Date(today.getFullYear(), today.getMonth(), 29),
           +new Date(today.getFullYear(), today.getMonth(), 28)
        ];

function  highlightDates(){
 $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
 $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
}
    function Checkthis(e) {
    
          
         
          if(!isCalendarInitialized) {
            $("[data-role=calendar]").data("kendoCalendar").bind("navigate", highlightDates);
            isCalendarInitialized = true; 
          }
         $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
        $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
       }



      
    
    function Calender_change(e) {
     
        $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
        $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
    }
   
</script>

<style>
    .disabled{ 
      /* adding some CSS to match the normal days styling */
      display: block;
      overflow: hidden;
      min-height: 15px;
      line-height: 15px;
      padding: 0;
      cursor:default;
      opacity: 0.5;
    }
    </style>