Highlight dates in specific range with jQuery's datepicker

You can use the beforeShowDay event. It will get called for each date that needs to be shown in the calendar. It passes in a date and return an array with [0]= isSelectable, [1]= cssClass, [2]=Some tooltip text

$('#whatever').datepicker({            beforeShowDay: function(date) {             if (date == myDate) {              return [true, 'css-class-to-highlight', 'tooltipText'];              }else{              //this will allow the cell be selected without been highlighted              return [true,'']              }           }});

Here's a working example! You will nees to make a package from here with http://jqueryui.com/download with core, widget and datepicker.

The javascript part to put before :

<script>$(document).ready(function() {    var dates = ['22/01/2012', '23/01/2012']; //            //tips are optional but good to have    var tips  = ['some description','some other description'];          $('#datepicker').datepicker({                        dateFormat: 'dd/mm/yy',        beforeShowDay: highlightDays,        showOtherMonths: true,        numberOfMonths: 3,    });    function highlightDays(date) {        for (var i = 0; i < dates.length; i++) {            if (new Date(dates[i]).toString() == date.toString()) {                              return [true, 'highlight', tips[i]];            }        }        return [true, ''];     } });</script>

The HTML part:

<div id="datepicker"></div>

Add somewhere this CSS:

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

And you will need to make a small image called bg.png to make it work

Thought I would throw in my two cents as it seems faster and more light weight than others:

jQuery(function($) {  var dates = {    '2012/6/4': 'some description',    '2012/6/6': 'some other description'  };  $('#datepicker').datepicker({    beforeShowDay: function(date) {      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();      if (search in dates) {        return [true, 'highlight', (dates[search] || '')];      }      return [false, '', ''];    }  });});