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:centerExample - 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>' )
Hello,
ReplyDeleteI came across your post "Adding Text to Days in DatePicker jqueryui" and that is exactly what I am attempting to do.
I've played around with the code snippet you had posted but just can't get this to work. Would you have or do you know where I might find a more complete sample?
Much appreciated & thanks.
Brian K