JSFiddle - React, Tailwind, and code Playground
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.mobile.all.min.css">
<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-bind="value: val"></div>
JavaScript
$.ajax({
url: "/echo/json/",
dataType: "json",
type: "POST",
data: { //using jsFiddle's echo service to simulate Json request
json: JSON.stringify({
value: "01/01/2013",
dates: [
"01/02/2013", "01/03/2013"
]
})
},
success: function(response) {
var value = kendo.parseDate(response.value),
dates = response.dates;
viewModel.set("val", value);
for(var i = 0; i < dates.length; i++) {
//push dates in viewModel's dates array
viewModel.dates.push(kendo.parseDate(dates[i]));
}
$("#calendar").data("kendoCalendar")
.setOptions({dates: viewModel.get("dates")}); //set the dates
$("#calendar").data("kendoCalendar")
.navigate(); //refresh
}
});
var viewModel = kendo.observable({
val: null,
dates: []
});
kendo.bind($("body"), viewModel);