jQuery & jQueryUI Base

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<div></div>

CSS

table.ui-datepicker-calendar tbody td.highlight > a {
    background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
    color: #363636;
    border: 1px solid #FFDE2E;
}

JavaScript

var events = [ 
    { Title: "Five K for charity", StartDate: new Date("04/13/2011") }, 
    { Title: "Dinner", StartDate: new Date("04/25/2011") }, 
    { Title: "Meeting with manager", StartDate: new Date("04/01/2011") }
];

$("div").datepicker({
    beforeShowDay : function(date) {
        var result = [ true, '', null ];
        var matching = $.grep(events, function(event) {
            return event.StartDate.valueOf() === date.valueOf();
        });

        if (matching.length) {
            result = [ true, 'highlight', null ];
        }
        return result;
    },
    onSelect : function(dateText) {
        var date, selectedDate = new Date(dateText), i = 0, event = null;

        while (i < events.length && !event) {
            date = events[i].StartDate;

            if (selectedDate.valueOf() === date.valueOf()) {
                event = events[i];
            }
            i++;
        }
        if (event) {
          alert(event.Title); 
        }
    }
});