The DatePicker beforeShowDay event is ideal for this type of a requirement. As described in the documentation “The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or ” for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the DatePicker before it is displayed.”
<style type=”text/css”>
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background-color : Green !important;
background-image :none !important;
color: White !important;
font-weight:bold !important;
font-size: 12pt;}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
var datelist=[“2013-06-21″,”2013-06-22″,”2013-06-23″ ,”2013-07-09″,”2013-07-12”, “2013-07-15”];
$(“#datepicker”).datepicker({
numberOfMonths: 3,
beforeShowDay: function(date) {
// normalize the date for searching in array
var date1 = date.getFullYear() + “-” + ((‘0’ + (date.getMonth()+1)).slice(-2)) + “-” + ((‘0′ + (date.getDate())).slice(-2));
if ($.inArray(date1, datelist) >= 0) {
return [true, “highlight”,’tset’];
}
else {
return [false, “”];
}
}
});
});
</script>
<div id=”datepicker”></div>
Zend Tutorial 