Question

I have an array of unavailable dates set at unavailableDates and weekends.

Array:

<script type="text/javascript">//<![CDATA[
var unavailableDates = [];
{foreach $fixed.rows as $row}
    var row = {};
    row['date_from'] = "{$row.fixed_date_from.value}";
    row['date_until'] = "{$row.fixed_date_until.value}";
    row['name'] = "{$row.fixed_name.value} ({$row.fixed_type.value})";
    unavailableDates.push(row);
{/foreach}
//]]></script>

Q1) How can I add an extra check for the until date. I have got it working as shown below for the from date?

Q2) Can I improve the code to use in_array instead of loop through each of the dates for each calendar day?

var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDays = ["Saturday","Sunday"];

$("#.datePicker").datepicker($.extend(true, {}, $.initDatePickers.defaults, {
    beforeShowDay: function(date) {
        ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
        day = new Date(ymd).getDay();
        result = null;

        // Check if date in unavailable array or weekend
        for(var i = 0; i < unavailableDates.length; i++){
            if ((ymd == unavailableDates[i].date_from) && $.inArray(days[day], unavailableDays) < 0) {
                return [false,"unavailable",unavailableDates[i].name];
            }
        }

        if(result){
            return result;
        } else {
            return [true, "available", ""];
        }
    } 
}));

Answer 1

Use the befreShowDay option to parse your data array to determine if day is selectable or not

beforeShowDayType: Function( Date date )

A 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 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.