How does beforeShowDay method work? (Jquery UI datepicker)

Question

I have been trying to find a clear explanation for a significant amount of time now but I just can't seem to understand how this method works. Below is the official documentation from the Jquery UI API. It may be clear to others but I find it a bit vague. I simply want to take an array of dates and disable them. I am able to make all dates not selectable but not the ones I want.

beforeShowDayType: Function( Date date )

Default: null

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

---

This is my (incomplete) code so far.

$(document).ready(function() {
    var array = ["2014-01-03","2014-01-13","2014-01-23"];
    $('#fromDate').datepicker({
        dateFormat: "yy-mm-dd",
        beforeShowDay: function(date) {
            {
                return [false, "", "Booked out"];
            } else {
                return [true, "", "available"];
            }
        }
    });
});

Answer 1

Try this:

beforeShowDay: function(date) {
    if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array) > -1)
    {
        return [false,"","Booked out"];
    }
    else
    {
        return [true,'',"available"];
    }
}