Problem in displaying a calendar control using JavaScript..
-
Dear Friends.. I am uisng the following javascript code to dispaly a calendar in my .aspx page.The problem is, i am having a panel on which i have textboxes so that i can pick the date from the calendar created by javascript and display them in the textboxes as inputs.The calendar is shown but its shown behind the panel.i.e i am unable to view half of the calendar since they are hidden behind the panel.How to make it available over the panel...? The script is below... var dtToday=new Date(); var Cal=null; var MonthName=["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"]; var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var exDateTime;//Existing Date and Time var BodyOverflow=""; var selectControls; //Configurable parameters var DefaultFormat="DDMMYYYY";// Default Format to display date. var cnTop="200";//top coordinate of calendar window. var cnLeft="500";//left coordinate of calendar window var cnWidth="175";//width of calendar window - Height is automatic. var WeekChar=1;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed. var CellWidth=20;//Width of day cell. var DateSeparator="/";//Date Separator, you can change it to "/" if you want. var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header. var WeekHeadColor="#B7B7FF";//Background Color in Week header. var SundayColor="#FFFFFF";//Background color of Sunday. var SaturdayColor="#FFFFFF";//Background color of Saturday. var WeekDayColor="white";//Background color of weekdays. var FontColor="blue";//color of font in Calendar day cell. var TodayColor="#FF0099";//Background color of today. var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox. var CalendarBackColor = "#FFFFFF";//Backgrond color of Calendar Window. var YrSelColor="#cc0033";//color of font of Year selector. var NavFontSize="2"; //Font size of line of navigation links. var CalFontSize="2"; //Font size of line of navigation links. var vDropCalander=""; function OpenCal(pCtrl,pFormat) { if( Cal ) { if( Cal.elem ) { var id = Cal.Ctrl.id; CloseCal(); //Calendar was open somewhere so close it. if( id == pCtrl ) //The user clicked the same control that opened us so and return. return; } } Cal=new Calendar(dtToday); if (pCtrl!=null) { Cal.Ctrl = getCtrl(pCtrl); if( !Cal.Ctrl ) Cal.Ctrl = {}; if( !Cal.Ctrl.id ) Cal.Ctrl.id = {}; Ca
-
Dear Friends.. I am uisng the following javascript code to dispaly a calendar in my .aspx page.The problem is, i am having a panel on which i have textboxes so that i can pick the date from the calendar created by javascript and display them in the textboxes as inputs.The calendar is shown but its shown behind the panel.i.e i am unable to view half of the calendar since they are hidden behind the panel.How to make it available over the panel...? The script is below... var dtToday=new Date(); var Cal=null; var MonthName=["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"]; var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var exDateTime;//Existing Date and Time var BodyOverflow=""; var selectControls; //Configurable parameters var DefaultFormat="DDMMYYYY";// Default Format to display date. var cnTop="200";//top coordinate of calendar window. var cnLeft="500";//left coordinate of calendar window var cnWidth="175";//width of calendar window - Height is automatic. var WeekChar=1;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed. var CellWidth=20;//Width of day cell. var DateSeparator="/";//Date Separator, you can change it to "/" if you want. var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header. var WeekHeadColor="#B7B7FF";//Background Color in Week header. var SundayColor="#FFFFFF";//Background color of Sunday. var SaturdayColor="#FFFFFF";//Background color of Saturday. var WeekDayColor="white";//Background color of weekdays. var FontColor="blue";//color of font in Calendar day cell. var TodayColor="#FF0099";//Background color of today. var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox. var CalendarBackColor = "#FFFFFF";//Backgrond color of Calendar Window. var YrSelColor="#cc0033";//color of font of Year selector. var NavFontSize="2"; //Font size of line of navigation links. var CalFontSize="2"; //Font size of line of navigation links. var vDropCalander=""; function OpenCal(pCtrl,pFormat) { if( Cal ) { if( Cal.elem ) { var id = Cal.Ctrl.id; CloseCal(); //Calendar was open somewhere so close it. if( id == pCtrl ) //The user clicked the same control that opened us so and return. return; } } Cal=new Calendar(dtToday); if (pCtrl!=null) { Cal.Ctrl = getCtrl(pCtrl); if( !Cal.Ctrl ) Cal.Ctrl = {}; if( !Cal.Ctrl.id ) Cal.Ctrl.id = {}; Ca
No-one is going to read all of this code. This is a common problem, jscript menus showing up under controls. I'm not sure what the solution is, it may involve finding another control, or reorganising your page layout.
Christian Graus - Microsoft MVP - C++ "also I don't think "TranslateOneToTwoBillion OneHundredAndFortySevenMillion FourHundredAndEightyThreeThousand SixHundredAndFortySeven()" is a very good choice for a function name" - SpacixOne ( offering help to someone who really needed it ) ( spaces added for the benefit of people running at < 1280x1024 )
-
Dear Friends.. I am uisng the following javascript code to dispaly a calendar in my .aspx page.The problem is, i am having a panel on which i have textboxes so that i can pick the date from the calendar created by javascript and display them in the textboxes as inputs.The calendar is shown but its shown behind the panel.i.e i am unable to view half of the calendar since they are hidden behind the panel.How to make it available over the panel...? The script is below... var dtToday=new Date(); var Cal=null; var MonthName=["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"]; var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var exDateTime;//Existing Date and Time var BodyOverflow=""; var selectControls; //Configurable parameters var DefaultFormat="DDMMYYYY";// Default Format to display date. var cnTop="200";//top coordinate of calendar window. var cnLeft="500";//left coordinate of calendar window var cnWidth="175";//width of calendar window - Height is automatic. var WeekChar=1;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed. var CellWidth=20;//Width of day cell. var DateSeparator="/";//Date Separator, you can change it to "/" if you want. var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header. var WeekHeadColor="#B7B7FF";//Background Color in Week header. var SundayColor="#FFFFFF";//Background color of Sunday. var SaturdayColor="#FFFFFF";//Background color of Saturday. var WeekDayColor="white";//Background color of weekdays. var FontColor="blue";//color of font in Calendar day cell. var TodayColor="#FF0099";//Background color of today. var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox. var CalendarBackColor = "#FFFFFF";//Backgrond color of Calendar Window. var YrSelColor="#cc0033";//color of font of Year selector. var NavFontSize="2"; //Font size of line of navigation links. var CalFontSize="2"; //Font size of line of navigation links. var vDropCalander=""; function OpenCal(pCtrl,pFormat) { if( Cal ) { if( Cal.elem ) { var id = Cal.Ctrl.id; CloseCal(); //Calendar was open somewhere so close it. if( id == pCtrl ) //The user clicked the same control that opened us so and return. return; } } Cal=new Calendar(dtToday); if (pCtrl!=null) { Cal.Ctrl = getCtrl(pCtrl); if( !Cal.Ctrl ) Cal.Ctrl = {}; if( !Cal.Ctrl.id ) Cal.Ctrl.id = {}; Ca
Firstly you try to check your calendar z-index I try to check with you. your calendar can be override combo. Only panel problem should be same with last time I meet up problem. I think so that this is Calendar Issue. Last time I also think like that, I try to set with css. But it is not OK. Solution is here. Previously .net 1.1 is using like this. This is problem. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > Now .net 2.0 is solved ready of this problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> After migration from .net 1.1 to 2.0 is never changed of this. Anyway you can try to guess and fix. :)