.Net, Rails, and other stuff
Sai Jyothi Prasad Ponduru's learning blog
Thursday, June 16, 2011
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>' )
Tuesday, June 14, 2011
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 -
Newer Posts
Older Posts
Home
Subscribe to:
Posts (Atom)
Followers
Blog Archive
►
2024
(42)
►
November
(1)
►
October
(4)
►
September
(4)
►
August
(6)
►
June
(6)
►
May
(5)
►
March
(8)
►
February
(3)
►
January
(5)
►
2023
(82)
►
December
(2)
►
November
(11)
►
October
(3)
►
September
(10)
►
August
(7)
►
July
(4)
►
June
(9)
►
May
(1)
►
April
(11)
►
March
(6)
►
February
(11)
►
January
(7)
►
2022
(200)
►
December
(7)
►
November
(4)
►
October
(26)
►
September
(26)
►
August
(9)
►
July
(10)
►
June
(4)
►
May
(8)
►
April
(12)
►
March
(35)
►
February
(32)
►
January
(27)
►
2021
(231)
►
December
(18)
►
November
(8)
►
October
(19)
►
September
(5)
►
August
(20)
►
July
(44)
►
June
(29)
►
May
(15)
►
April
(23)
►
March
(19)
►
February
(13)
►
January
(18)
►
2020
(315)
►
December
(21)
►
November
(6)
►
October
(11)
►
September
(18)
►
August
(32)
►
July
(51)
►
June
(37)
►
May
(29)
►
April
(25)
►
March
(36)
►
February
(24)
►
January
(25)
►
2019
(229)
►
December
(18)
►
November
(32)
►
October
(22)
►
September
(28)
►
August
(26)
►
July
(14)
►
June
(19)
►
May
(15)
►
April
(10)
►
March
(6)
►
February
(11)
►
January
(28)
►
2018
(194)
►
December
(30)
►
November
(26)
►
October
(17)
►
September
(8)
►
August
(8)
►
July
(18)
►
June
(16)
►
May
(7)
►
April
(16)
►
March
(8)
►
February
(21)
►
January
(19)
►
2017
(181)
►
December
(13)
►
November
(4)
►
October
(4)
►
September
(7)
►
August
(9)
►
July
(26)
►
June
(31)
►
May
(26)
►
April
(15)
►
March
(27)
►
February
(13)
►
January
(6)
►
2016
(122)
►
December
(7)
►
November
(12)
►
October
(12)
►
September
(21)
►
August
(14)
►
July
(15)
►
June
(13)
►
May
(3)
►
April
(5)
►
March
(8)
►
February
(3)
►
January
(9)
►
2015
(55)
►
December
(7)
►
November
(6)
►
October
(5)
►
September
(12)
►
August
(3)
►
July
(10)
►
June
(8)
►
April
(1)
►
March
(2)
►
February
(1)
►
2014
(134)
►
December
(5)
►
October
(10)
►
September
(6)
►
August
(13)
►
July
(12)
►
June
(10)
►
May
(18)
►
April
(9)
►
March
(18)
►
February
(20)
►
January
(13)
►
2013
(180)
►
December
(11)
►
November
(21)
►
October
(13)
►
September
(15)
►
August
(18)
►
July
(21)
►
June
(34)
►
May
(13)
►
April
(4)
►
March
(20)
►
February
(8)
►
January
(2)
►
2012
(34)
►
December
(1)
►
November
(4)
►
October
(4)
►
September
(5)
►
July
(2)
►
June
(3)
►
May
(6)
►
March
(1)
►
February
(6)
►
January
(2)
▼
2011
(27)
►
December
(3)
►
November
(2)
►
October
(6)
►
September
(5)
►
July
(2)
▼
June
(2)
Adding Text to Days in DatePicker jqueryui
ASHX JSON - to fill a dropdownlist using AJAX
►
March
(4)
►
January
(3)
►
2010
(42)
►
December
(2)
►
November
(9)
►
October
(10)
►
September
(4)
►
August
(1)
►
July
(2)
►
June
(1)
►
May
(3)
►
March
(8)
►
February
(2)
About Me
Sai Jyothi Prasad Ponduru
View my complete profile