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, '', ''];
    }
  });
});

Not sure if this will be still useful, but as this was useful to me, I want to share what I did:

In my JavaScript:

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker({ beforeShowDay: highLight });

function highLight(date) {
        for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return [true, 'ui-state-holiday'];
            }
        }
        return [true];
    }

And in the jquery-ui-theme.css I've added

.ui-state-holiday .ui-state-default {
    color: red;
}

If you want to highlight weekends also, you have to use this CSS instead

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
    color: red;
}

And this is the result:

(Note that I have configured my language to spanish, but this is not important to this code)

If you are using Keith Wood's datepick you can use the following example taken from here

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
}