I am wondering if we can control where the popup calendar on a calendar control appears on the screen. We have a pair of controls and when you click for the calendar it appears below and one must scroll down to see it.

I assume it's position is being set relative to the control in CSS or javaScript. Can we affect this in any way?

Thanks

What version? What browser. We find the calendar stays linked to the right of the calendar box in IE, but it floats in Firefox. If anyone has a solution would be nice.

Before some one else asks you, please update your profile to show the version in the signature.

Thanks.

I had to deal with something similar in one of my programs. I could not find an easy way to do that but a work around achieved almost the same result. Using this work around you can display your calendar at a certain location (IE6+ only…it has not been tested for any other browser).

In order for us to display an object at certain location we would need to get the available height and width of the browser. We could use something like this to get that info.

var scr_w = screen.availWidth;
var scr_h = screen.availHeight;

Only problem is that result will not be consistent and depending upon the size of window (if resized) object may display at different location. Work around would be to resize the window to a known size using something like this:

function reSizeWin(){

//var scr_w = screen.availWidth;
//var scr_h = screen.availHeight;
var scr_w = 875;
var scr_h = 655;
var myWidth, myHeight;

   if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

if (scr_w != myWidth || scr_h != myHeight) {
   window.resizeTo(scr_w, scr_h);
   window.moveTo(0, 0);
}
}

Once you have it resized, you can use that info in your call to the calendar object. In my case it was something like this:

function cal_popup2 (str_datetime) {
	     
	if (str_datetime) {
		this.dt_current = this.prs_tsmp(str_datetime);
	}
	else {
		this.dt_current = this.prs_tsmp(this.target.value);
		this.dt_selected = this.dt_current;
	}
	if (!this.dt_current) return;
	
		
/*get the position of the object, on page, where you want calendar window to be displayed*/  
var myid1 = document.getElementById('calenImg2');
var elem1 = GetElementPosition(myid1);

/*set an offset value (depending upon where the object is located)*/
var offsetL=23
var newL=elem1.x+offsetL

 
	var obj_calwindow = window.open(
		'http://ServerName/ibi_html/htm_files/calendar.htm?datetime=' + this.dt_current.valueOf()+ '&id=' + this.id,
		'Calendar', 'width=200,height='+(this.time_comp ? 215 : 190)+
		',status=no,resizable=no,left='+newL+',top='+elem1.y+',dependent=yes,alwaysRaised=yes');
	obj_calwindow.opener = window;
	obj_calwindow.focus();
}

I hope this makes sense to you. It may or may not work in your situation but at least it worth a shot.