JQuery UI Datepicker as multiple date display

Question

I've used the JQuery UI DatePicker in the past and am pretty happy with it. I'm looking for a way to display to the user multiple dates into the future. I don't want the user to be able to choose the dates, I just want to make them fixed them at runtime.

Is there any easy way to make this possible?

Answer 1

You can do that with the beforeShowDay event.

// list of dates to highlight
var dates = [
    [2011, 8, 1],
    [2011, 8, 9],
    [2011, 8, 25]
];

$('#datepicker').datepicker({
    beforeShowDay: function (date){
        var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();

        // see if the current date should be highlighted
        for (var i=0; i < dates.length; ++i)
            if (year == dates[i][0] && month == dates[i][1] - 1 &&  day == dates[i][2])
            return [false, 'ui-state-highlight ui-state-active'];

        return [false];
    }
});

See example: http://jsfiddle.net/william/VzZYU/