jQuery & jQueryUI Base

by BinaryAcid

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


<div id="cal"></div>
<br>
<div id="event">Click date to show event</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", Date: new Date("11/13/2012") }, 
    { Title: "Dinner", Date: new Date("11/25/2012") }, 
    { Title: "Meeting with manager", Date: new Date("11/01/2012") }
];

$("#cal").datepicker({
    numberOfMonths: [ 1, 3 ],
    // showCurrentAtPos: 1,
    beforeShowDay: function(date) {
        var result = [true, '', null];
        var matching = $.grep(events, function(event) {
            return event.Date.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].Date;

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

            $("#event").html(event.Title);
            
            
            
        }
    }
});