Adding Text to Days in DatePicker jqueryui

Steps

Required Steps:
(1) All days displayed are actually <a> tags. So, replace html of the required <a> tag with required html
Repeat 1 for as many days as required.
(2) At this point , since the html for some <a> tags has been modified, the height and width of the cells containing these modified <a> tags might be different than others in the same row. So, for each row, find out maximum height among <a> tags, and make it the height for all <a> tags in that row.

Optional steps:
(3) Left-align text that has been added
(4) Center all <a> tags using text-align:center

Example - jquery code for the above steps

To add text to June 26, 2011 in DatePicker in jqueryui -

$('table a:eq(25)').html('<table><tr><td valign="top">26</td></tr><tr><td><span style="font-size:10px"><b>Sai-On Vacation</span></td></tr></table>');

$('table a:eq(25)').find('span').css('text-align', 'left');

$('a').css('text-align', 'center');

$('table a:eq(25)').parent().parent().find('a').height($('table a:eq(25)').height());

Function to make heights of cells same in each row

The below function could be used for Step 2 in "Required Steps" above (i.e. to make the heights of all <a> tags same in a row) -

function findAnchorWithMaxHtInEachRowAndAssignItsHtToAllAnchors() {
  for (i = 0; i < 5; i++) { // There are only 5 rows in each calendar
    max_ht = 0;
    $('table.ui-datepicker-calendar > tbody > tr:eq(' + i.toString() + ') >td > a').each(function () { // find max ht in each row
      if ($(this).height() > max_ht)
          max_ht = $(this).height();
    });
    $('table.ui-datepicker-calendar > tbody > tr:eq(' + i.toString() + ') >td > a').each(function () { // assign this max ht to all <a> tags in that row
      $(this).height(max_ht);
    });
  }
}

When showing multiple calendar controls on the page

When showing multiple months, like for eg. in 2rows,3cols (i.e. 6 months), we have to prefix the following to reach the correct month's calendar instance - <span style="font-weight:bold;">$('span.ui-datepicker-month:eq(2)').parent().parent().parent().find(</span>      as in

$('span.ui-datepicker-month:eq(2)').parent().parent().parent().find('table a:eq(16)').html('17 <br> <span style="font-size:5px"><b>Sai-Approved-By Anil</b><br><i>Sai-Not Approved-By Anil</i></span>' )

ASHX JSON - to fill a dropdownlist using AJAX

HTML page with dropdownlist that makes ajax call to a .net http handler -


(CLICK ON IMAGES TO SEE CODE MORE CLEARLY)

http handler .ashx code -