Calendar setPosition on Input box

I’ve read several of the other posts on this topic but I’m still not sure what the best answer is.

I have one instance of a calendar object attached to several input boxes on a page. All are functioning properly.



I notice if the calendar appears near the bottom of the page it automatically adjusts to align the bottom of the calendar with the top of the input box… otherwise it aligns the top of the calendar with the top of the input box.



I simply want to adjust the position of the popup calendar so that the middle is always aligned with the middle of my input boxes instead of the top or bottom. Is it possible to adjust the CSS of either the calendar or the input box to do this?

setPosition(x,y) does not seem to apply to input boxes… especially where multiple inputs use the same calendar.



Thanks.


>> I simply want to adjust the position of the popup calendar so that the middle is always aligned with the middle of my input boxes instead of the top or bottom


You can modify the dhtmlxcalendar.js:


try to locate line


this.parent.style.top = aTop + ‘px’;


and replace it with


this.parent.style.top = aTop - this.parent.offsetHeight/2 + ‘px’;


That works! Thanks!!



Calendars near the bottom of the page still align to the top of the input box if there is not enough room to display the calendar… but adding a break tag or two takes care of that and I wouldn’t normally want an input field right at the bottom of the page anyway.


>> Calendars near the bottom of the page still align to the top of the input box if there is not enough room to display the calendar


You can also modify the following line:


this.parent.style.top = aTop - this.parent.offsetHeight + this.activeCon.offsetHeight + ‘px’;


as follows:


this.parent.style.top = aTop - this.parent.offsetHeight/2 + this.activeCon.offsetHeight + ‘px’;


Peachy… Works a treat!



Thanks again!!