JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" type="text/css" />
<input id="iDate" />

CSS

.disabled span{
    color:black !important;
    background:red !important;    
}
.enabled a{
    color:black !important;
    background:green !important;    
}

JavaScript

var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDates = ["2017/10/04","2017/10/05","2017/10/25"]; // yyyy/MM/dd
var unavailableDays = ["Saturday","Sunday","Monday","Friday"];

function unavailable(date) {
    ymd = date.getFullYear() + "/" + ("0"+(date.getMonth()+1)).slice(-2) + "/" + ("0"+date.getDate()).slice(-2);
    day = new Date(ymd).getDay();
    if ($.inArray(ymd, unavailableDates) < 0 && $.inArray(days[day], unavailableDays) < 0) {
        return [true, "enabled", "Seats Available"];
    } else {
        return [false,"disabled","Full"];
    }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });