<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="configuration">
<span class="infoHead">Information</span>
<p>
Apply special style for the birthdays.
</p>
</div>
<table class="demo-section">
<tr>
<td>
<input id="datetimepickerBegin" />
</td>
<td>
<input id="datetimepickerEnd" />
</td>
</tr>
</table>
<script>
function isInArray(date, dates) {
for(var idx = 0, length = dates.length; idx < length; idx++) {
var d = dates[idx];
if (date.getFullYear() == d.getFullYear() &&
date.getMonth() == d.getMonth() &&
date.getDate() == d.getDate()) {
return true;
}
}
return false;
}
$(document).ready(function() {
var today = new Date(),
birthdays = [
new Date(today.getFullYear(), today.getMonth(), 11, 10, 0, 0),
new Date(today.getFullYear(), today.getMonth(), 11, 10, 30, 0),
new Date(today.getFullYear(), today.getMonth(), 11, 14, 0, 0),
new Date(today.getFullYear(), today.getMonth() + 1, 6, 20, 0, 0),
new Date(today.getFullYear(), today.getMonth() + 1, 27, 8, 0, 0),
new Date(today.getFullYear(), today.getMonth() + 1, 27, 18, 0, 0),
new Date(today.getFullYear(), today.getMonth() - 1, 3, 12, 0, 0),
new Date(today.getFullYear(), today.getMonth() - 2, 22, 16, 30, 0)
];
$("#datetimepickerBegin").kendoDateTimePicker({
format: "yyyy-MM-dd hh:mm:ss",
parseFormats: ["yyyy-MM-dd", "hh:mm:ss"],
value: today,
dates: birthdays,
month: {
// template for dates in month view
content: '# if (isInArray(data.date, data.dates)) { #' +
'<div class="birthday"></div>' +
'# } #' +
'#= data.value #'
},
footer: "Today - #=kendo.toString(data, 'd') #"
});
$("#datetimepickerBegin").data("kendoDateTimePicker")
.dateView.calendar.element
.width(300);
$("#datetimepickerEnd").kendoDateTimePicker({
format: "yyyy-MM-dd hh:mm:ss",
parseFormats: ["yyyy-MM-dd", "hh:mm:ss"],
value: today,
dates: birthdays,
month: {
// template for dates in month view
content: '# if (isInArray(data.date, data.dates)) { #' +
'<div class="birthday"></div>' +
'# } #' +
'#= data.value #'
},
footer: "Today - #=kendo.toString(data, 'd') #"
});
$("#datetimepickerEnd").data("kendoDateTimePicker")
.dateView.calendar.element
.width(300);
});
</script>
<style scoped>
.demo-section {
margin-right: 375px;
width: 185px;
}
.birthday {
background: transparent url(../../content/web/calendar/cake.png) no-repeat 0 50%;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 3px;
}
</style>
</div>
</body>
</html>
