JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="dates"></div>
<div id="dateevent">
</div>

CSS

.pink > a { 
    background-color: pink !important;
    background-image:none !important;
}

.green > a { 
    background-color: green !important;
    background-image: none !important;
}

JavaScript

var Event = function(text, className) {
    this.text = text;
    this.className = className;
};

var events = {};
events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
events[new Date("02/18/2011")] = new Event("Payday", "green");

console.dir(events);

$("#dates").datepicker({
defaultDate : "02/18/2011",
changeMonth: true,
changeYear: true,
onSelect: function(date) {
	var events2 = events[new Date(date)];
  alert(events2.text);
  //list the events in #dateeventDIV
},
    beforeShowDay: function(date) {
        var event = events[date];
        if (event) {
            return [true, event.className, event.text];
        }
        else {
            return [true, '', ''];
        }
    }
});