Kendo Core

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="calendar"
    data-role="calendar"
    data-month='{"content": "#= render(data, dates) #"}'
    data-bind="value: day">
</div>

<div id='messages'></div>

CSS

.session-today{
   background: #0088DD !important;
   color: #FFF;
    display:inline-block;
    width: 100%;
}

JavaScript

$(document).ready(function(){
    var viewModel = kendo.observable({
        day: new Date("01/01/2013"),
        dates: [
           new Date("01/02/2013"),
           new Date("01/04/2013"),
           new Date("01/06/2013"),
           new Date("02/06/2013")
        ]
    });
     
    kendo.bind($("body"), viewModel);
    $("#calendar").data("kendoCalendar").setOptions({ dates: viewModel.get("dates") }); //set dates
    $("#calendar").data("kendoCalendar").navigate(); //refresh
});
 
function render(data, dates) {
    if (dates.length > 0) {
         var renderDate = kendo.toString(data.date, "dd/MM/yyyy");


        for(var i = 0; i < dates.length; i++){
            var checkDate = kendo.toString(dates[i], "dd/MM/yyyy");
            if(renderDate === checkDate){
                return "<span class='session-today'>" + data.value + "</span>";
            }   
        }
    }
    
    return data.value;
}