Kendo Core
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;
}