JSFiddle - React, Tailwind, and code Playground

HTML

<div id="eventCalendar"></div>

CSS

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

JavaScript

var bookings = {
    "2012-09-01": 24,
    "2012-09-03": 31,
    "2012-09-05": 27,
    "2012-09-06": 9,
    "2012-09-07": 18,
    "2012-09-08": 0,
    "2012-09-10": 20,
    "2012-09-12": 19,
    "2012-09-13": 0,
    "2012-09-14": 9,
    "2012-09-15": 24,
    "2012-09-17": 19,
    "2012-09-19": 28,
    "2012-09-20": 15,
    "2012-09-21": 12,
    "2012-09-22": 25,
    "2012-09-24": 19,
    "2012-09-26": 0,
    "2012-09-27": 0,
    "2012-09-28": 0,
    "2012-09-29": 0
};

function myEvent(date) {
    bookings = bookings || {};

    this.date = date.toISOString().substr(0, 10);
    this.display = (typeof bookings[this.date] == 'number' && bookings[this.date] > 0);

    return this;
}

myEvent.prototype.toArray = function() {
    return [this.display, null, null];
};
$(function() {
    $('#eventCalendar').datepicker({
        dateFormat: "yy-mm-dd",
        firstDay: 1,
        defaultDate: "2012-09-24",
        beforeShowDay: function(date) {
            return new myEvent(date).toArray();
        }
    });
});