JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div class="input">
    <lable for="startDate">Start Date:</label>
    <input type="text" id="startDate" class="date" />
    <div class="notHelperText"></div>
</div>

CSS

td.hasEvents a.ui-state-default { background: #96d3f2; color: white; }
td.hasSoldOut a.ui-state-default { background: #e89292; }

JavaScript

var dtConfig = {
    "0": { "class": "", "title": "" },
    "1": { "class": "hasEvents", "title": "Open Events"},
    "2": { "class": "hasEvents hasSoldOut", "title": "Classes Sold Out"}
},
    dtAvail = { "05/09/2013" : "1", "05/11/2013": "2" };


$("#startDate").datepicker({beforeShowDay: dateAvailable });


function dateAvailable(dtRec) {
    var mdy = $.datepicker.formatDate('mm/dd/yy', dtRec),
        dtCur = dtConfig[dtAvail[mdy]];

    if ( dtCur !== undefined ) {
        return [true, dtCur.class, dtCur.title];
    } else {
        return [true, "", ""];
    }
}