jQuery UI Datepicker As Populated Calendar

This demo is coded to re-style/highlight the 3rd, 14th, and 28th day of whatever the current month is. Clicking on one of the highlighted dates will bring up an alert box that displays information about this page: obviously, in a real-world situation, you would want to use something more elegant than an alert box to display the information.

The demo works because of two small modifications to the normal jQuery UI Datepicker (version 1.7.1):

• The addition of the "afterRedraw" event, which occurs after the calendar is redrawn by functions internal to the Datepicker (which happens pretty much every time you click something on the calendar).
• The addition of the "alt" attribute to the <a> tags that surround each date in the month, which contains the full date (month, year, and day) for that day in whatever date format the Datepicker is configured to use. This was done in order to make it easy to use jQuery selectors to select the link for a certain date ($(".ui-datepicker a[alt='" + {date you want} + "']"))

To see the modifications, simply browse to the "ui.datepicker.modified.js" file (which lives in the same directory as this file), and do a search for the text "//MODIFIED", which appears above any of the additional code (all of the modifications are actually additions to the existing code, so none of the previous Datepicker functionality is affected). If you want to compare it to the original Datepicker code, you can also browse to that in this directory: "ui.datepicker.original.js"

This code should be considered to be proof-of-concept: it works, but I'm sure the jQuery UI folks could do it better if they wanted to add this functionality.