The code below is opening a calendar on mouse over in the same window.
I need the calendar to be opened in new window.
Have to fulfill this requirement urgentely so posting the whole code here.
I tried doing some workaround using
but not getting the calendar in new window.
[html]
<html>
<head>
<script language="JavaS cript">
<!--
var months = new Array("January" , "February", "March", "April", "May", "June", "July", "August", "September" , "October", "November", "December") ;
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("S", "M", "T", "W", "T", "F", "S");
today = new getToday();
var element_id;
function getDays(month, year)
{
// Test for leap year when February is selected.
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday()
{
// Generate today's date.
this.now = new Date();
this.year = this.now.getFul lYear() ; // Returned year XXXX
this.month = this.now.getMon th();
this.day = this.now.getDat e();
}
function newCalendar()
{
var parseYear = parseInt(docume nt.all.year [document.all.ye ar.selectedInde x].text);
var newCal = new Date(parseYear , document.all.mo nth.selectedInd ex, 1);
var day = -1;
var startDay = newCal.getDay() ;
var daily = 0;
today = new getToday(); // 1st call
if ((today.year == newCal.getFullY ear() ) && (today.month == newCal.getMonth ()))
day = today.day;
// Cache the calendar table's tBody section, dayList.
var tableCal = document.all.ca lendar.tBodies. dayList;
var intDaysInMonth =
getDays(newCal. getMonth(), newCal.getFullY ear() );
for (var intWeek = 0; intWeek < tableCal.rows.l ength; intWeek++)
for (var intDay = 0;
intDay < tableCal.rows[intWeek].cells.length;
intDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay];
// Start counting days.
if ((intDay == startDay) && (0 == daily))
daily = 1;
// Highlight the current day.
cell.style.colo r = (day == daily) ? "red" : "";
if(day == daily)
{
document.all.to dayday.innerTex t= "Today: " + day + "/" +
(newCal.getMont h()+1) + "/" + newCal.getFullY ear() ;
}
// Output the day number into the cell.
if ((daily > 0) && (daily <= intDaysInMonth) )
cell.innerText = daily++;
else
cell.innerText = "";
}
}
function getTodayDay()
{
document.all[element_id].value = today.day + "/" + (today.month+1) +
"/" + today.year;
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
document.all.ye ar.selectedInde x =100;
document.all.mo nth.selectedInd ex = today.month;
}
function getDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if ("TD" == event.srcElemen t.tagName)
// Test whether day is valid.
if ("" != event.srcElemen t.innerText)
{
var mn = document.all.mo nth.selectedInd ex+1;
var Year = document.all.ye ar [document.all.ye ar.selectedInde x].text;
// document.all[element_id].value=event.sr cElement.innerT ext+"/"+mn +"/" +Year;
document.all[element_id].value=mn+"/"+ event.srcElemen t.innerText+"/" +Year;
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
}
}
function PassDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if ("TD" == event.srcElemen t.tagName)
// Test whether day is valid.
if ("" != event.srcElemen t.innerText)
{
var mn = document.all.mo nth.selectedInd ex+1;
var Year = document.all.ye ar [document.all.ye ar.selectedInde x].text;
// document.all[element_id].value=event.sr cElement.innerT ext+"/"+mn +"/" +Year;
var datePass=mn+"/"+ event.srcElemen t.innerText+"/" +Year;
document.all[element_id].value=mn+"/"+ event.srcElemen t.innerText+"/" +Year
strURL="../redirect.jsp"
strURL+="?date= " + datePass;
parent.frames['MAINBODY1'].location.href= strURL
}
}
function GetBodyOffsetX( el_name, shift)
{
var x;
var y;
x = -30;
y = 0;
var elem = document.all[el_name];
do
{
x += elem.offsetLeft ;
y += elem.offsetTop;
if (elem.tagName == "BODY")
break;
elem = elem.offsetPare nt;
} while (1 > 0);
shift[0] = x;
shift[1] = y;
return x;
}
function SetCalendarOnEl ement(el_name)
{
if (el_name=="")
el_name = element_id;
var shift = new Array(2);
GetBodyOffsetX( el_name, shift);
document.all.ca lendar.style.pi xelLeft = shift[0]; // - document.all.ca lendar.offsetLe ft;
document.all.ca lendar.style.pi xelTop = shift[1] + 45 ;
}
function ShowCalendar(el em_name)
{
if (elem_name=="")
elem_name = element_id;
element_id = elem_name; // element_id is global variable
newCalendar();
SetCalendarOnEl ement(element_i d);
//document.all.ca lendar.style.vi sibility = "visible";
document.all.ca lendar.style.di splay="inline";
}
function HideCalendar()
{
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
}
function toggleCalendar( elem_name)
{
//if (document.all.c alendar.style.v isibility == "hidden")
if(document.all .calendar.style .display=="none ")
ShowCalendar(el em_name);
else
HideCalendar();
}
function fillDate()
{
d = new Date();
curr_year = d.getFullYear() ;
curr_month = d.getMonth();
curr_day = d.getDate();
curr_date=curr_ month+"/"+curr_day+ "/"+curr_year ;
document.getEle mentById('MyDat e').value=curr_ date;
}
function opencal()
{
window.open ("cal.jsp","myw indow","status= 1,width=100,hei ght=100");
}
-->
</script>
<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>
<LINK href="../stylesheet/content.css" type=text/css rel=stylesheet>
<LINK href="../stylesheet/master.css" type=text/css rel=stylesheet>
<LINK href="../stylesheet/vsadmin.css" type=text/css rel=stylesheet>
</head>
<body onload="fillDat e()" bgcolor=#FFFFDF >
<FORM name=myForm>
<INPUT id=MyDate name=MyDate size=15>
<a href="JavaScrip t:;" onmouseover="to ggleCalendar('M yDate')">Calend ar</a>
<!--<a href="JavaScrip t:;" onmouseover="op encal();">Calen dar</a>-->
</form>
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4; left:0px; top:19px; width:78px; height:50px">
<TBODY>
<TR>
<TD colSpan=7 vAlign=center >
<!-- Month combo box -->
<SELECT id=month onchange=newCal endar()>
<SCRIPT language=JavaSc ript>
// Output months into the document.
// Select current month.
for (var intLoop = 0; intLoop < months.length; intLoop++)
document.write( "<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
</SCRIPT>
</SELECT>
<!-- Year combo box -->
<SELECT id=year onchange=newCal endar()>
<SCRIPT language=JavaSc ript>
// Output years into the document.
// Select current year.
for (var intLoop = 1900; intLoop < 2028; intLoop++)
document.write( "<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
</SCRIPT>
</SELECT>
</TD>
</TR>
<TR class=days>
<!-- Generate column for each day. -->
<SCRIPT language=JavaSc ript>
// Output days.
for (var intLoop = 0; intLoop < days.length; intLoop++)
document.write( "<TD>" + days[intLoop] + "</TD>");
</SCRIPT>
</TR>
<!-- <TBODY class=dates id=dayList onclick="getDat e('')" vAlign=center>-->
<TBODY class=dates id=dayList onclick="PassDa te('')" vAlign=center>
<!-- Generate grid for individual days. -->
<SCRIPT language=JavaSc ript>
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write( "<TR>");
for (var intDays = 0; intDays < days.length; intDays++)
document.write( "<TD></TD>");
document.write( "</TR>");
}
</SCRIPT>
<!-- Generate today day. --></TBODY>
<TBODY>
<TR>
<TD class=today colSpan=5 id=todayday onclick=getToda yDay()></TD>
<TD align=right colSpan=2><A href="javascrip t:HideCalendar( );"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
[/html]
I need the calendar to be opened in new window.
Have to fulfill this requirement urgentely so posting the whole code here.
I tried doing some workaround using
Code:
window.open()
[html]
<html>
<head>
<script language="JavaS cript">
<!--
var months = new Array("January" , "February", "March", "April", "May", "June", "July", "August", "September" , "October", "November", "December") ;
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("S", "M", "T", "W", "T", "F", "S");
today = new getToday();
var element_id;
function getDays(month, year)
{
// Test for leap year when February is selected.
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday()
{
// Generate today's date.
this.now = new Date();
this.year = this.now.getFul lYear() ; // Returned year XXXX
this.month = this.now.getMon th();
this.day = this.now.getDat e();
}
function newCalendar()
{
var parseYear = parseInt(docume nt.all.year [document.all.ye ar.selectedInde x].text);
var newCal = new Date(parseYear , document.all.mo nth.selectedInd ex, 1);
var day = -1;
var startDay = newCal.getDay() ;
var daily = 0;
today = new getToday(); // 1st call
if ((today.year == newCal.getFullY ear() ) && (today.month == newCal.getMonth ()))
day = today.day;
// Cache the calendar table's tBody section, dayList.
var tableCal = document.all.ca lendar.tBodies. dayList;
var intDaysInMonth =
getDays(newCal. getMonth(), newCal.getFullY ear() );
for (var intWeek = 0; intWeek < tableCal.rows.l ength; intWeek++)
for (var intDay = 0;
intDay < tableCal.rows[intWeek].cells.length;
intDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay];
// Start counting days.
if ((intDay == startDay) && (0 == daily))
daily = 1;
// Highlight the current day.
cell.style.colo r = (day == daily) ? "red" : "";
if(day == daily)
{
document.all.to dayday.innerTex t= "Today: " + day + "/" +
(newCal.getMont h()+1) + "/" + newCal.getFullY ear() ;
}
// Output the day number into the cell.
if ((daily > 0) && (daily <= intDaysInMonth) )
cell.innerText = daily++;
else
cell.innerText = "";
}
}
function getTodayDay()
{
document.all[element_id].value = today.day + "/" + (today.month+1) +
"/" + today.year;
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
document.all.ye ar.selectedInde x =100;
document.all.mo nth.selectedInd ex = today.month;
}
function getDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if ("TD" == event.srcElemen t.tagName)
// Test whether day is valid.
if ("" != event.srcElemen t.innerText)
{
var mn = document.all.mo nth.selectedInd ex+1;
var Year = document.all.ye ar [document.all.ye ar.selectedInde x].text;
// document.all[element_id].value=event.sr cElement.innerT ext+"/"+mn +"/" +Year;
document.all[element_id].value=mn+"/"+ event.srcElemen t.innerText+"/" +Year;
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
}
}
function PassDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if ("TD" == event.srcElemen t.tagName)
// Test whether day is valid.
if ("" != event.srcElemen t.innerText)
{
var mn = document.all.mo nth.selectedInd ex+1;
var Year = document.all.ye ar [document.all.ye ar.selectedInde x].text;
// document.all[element_id].value=event.sr cElement.innerT ext+"/"+mn +"/" +Year;
var datePass=mn+"/"+ event.srcElemen t.innerText+"/" +Year;
document.all[element_id].value=mn+"/"+ event.srcElemen t.innerText+"/" +Year
strURL="../redirect.jsp"
strURL+="?date= " + datePass;
parent.frames['MAINBODY1'].location.href= strURL
}
}
function GetBodyOffsetX( el_name, shift)
{
var x;
var y;
x = -30;
y = 0;
var elem = document.all[el_name];
do
{
x += elem.offsetLeft ;
y += elem.offsetTop;
if (elem.tagName == "BODY")
break;
elem = elem.offsetPare nt;
} while (1 > 0);
shift[0] = x;
shift[1] = y;
return x;
}
function SetCalendarOnEl ement(el_name)
{
if (el_name=="")
el_name = element_id;
var shift = new Array(2);
GetBodyOffsetX( el_name, shift);
document.all.ca lendar.style.pi xelLeft = shift[0]; // - document.all.ca lendar.offsetLe ft;
document.all.ca lendar.style.pi xelTop = shift[1] + 45 ;
}
function ShowCalendar(el em_name)
{
if (elem_name=="")
elem_name = element_id;
element_id = elem_name; // element_id is global variable
newCalendar();
SetCalendarOnEl ement(element_i d);
//document.all.ca lendar.style.vi sibility = "visible";
document.all.ca lendar.style.di splay="inline";
}
function HideCalendar()
{
//document.all.ca lendar.style.vi sibility="hidde n";
document.all.ca lendar.style.di splay="none";
}
function toggleCalendar( elem_name)
{
//if (document.all.c alendar.style.v isibility == "hidden")
if(document.all .calendar.style .display=="none ")
ShowCalendar(el em_name);
else
HideCalendar();
}
function fillDate()
{
d = new Date();
curr_year = d.getFullYear() ;
curr_month = d.getMonth();
curr_day = d.getDate();
curr_date=curr_ month+"/"+curr_day+ "/"+curr_year ;
document.getEle mentById('MyDat e').value=curr_ date;
}
function opencal()
{
window.open ("cal.jsp","myw indow","status= 1,width=100,hei ght=100");
}
-->
</script>
<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>
<LINK href="../stylesheet/content.css" type=text/css rel=stylesheet>
<LINK href="../stylesheet/master.css" type=text/css rel=stylesheet>
<LINK href="../stylesheet/vsadmin.css" type=text/css rel=stylesheet>
</head>
<body onload="fillDat e()" bgcolor=#FFFFDF >
<FORM name=myForm>
<INPUT id=MyDate name=MyDate size=15>
<a href="JavaScrip t:;" onmouseover="to ggleCalendar('M yDate')">Calend ar</a>
<!--<a href="JavaScrip t:;" onmouseover="op encal();">Calen dar</a>-->
</form>
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4; left:0px; top:19px; width:78px; height:50px">
<TBODY>
<TR>
<TD colSpan=7 vAlign=center >
<!-- Month combo box -->
<SELECT id=month onchange=newCal endar()>
<SCRIPT language=JavaSc ript>
// Output months into the document.
// Select current month.
for (var intLoop = 0; intLoop < months.length; intLoop++)
document.write( "<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
</SCRIPT>
</SELECT>
<!-- Year combo box -->
<SELECT id=year onchange=newCal endar()>
<SCRIPT language=JavaSc ript>
// Output years into the document.
// Select current year.
for (var intLoop = 1900; intLoop < 2028; intLoop++)
document.write( "<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
</SCRIPT>
</SELECT>
</TD>
</TR>
<TR class=days>
<!-- Generate column for each day. -->
<SCRIPT language=JavaSc ript>
// Output days.
for (var intLoop = 0; intLoop < days.length; intLoop++)
document.write( "<TD>" + days[intLoop] + "</TD>");
</SCRIPT>
</TR>
<!-- <TBODY class=dates id=dayList onclick="getDat e('')" vAlign=center>-->
<TBODY class=dates id=dayList onclick="PassDa te('')" vAlign=center>
<!-- Generate grid for individual days. -->
<SCRIPT language=JavaSc ript>
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write( "<TR>");
for (var intDays = 0; intDays < days.length; intDays++)
document.write( "<TD></TD>");
document.write( "</TR>");
}
</SCRIPT>
<!-- Generate today day. --></TBODY>
<TBODY>
<TR>
<TD class=today colSpan=5 id=todayday onclick=getToda yDay()></TD>
<TD align=right colSpan=2><A href="javascrip t:HideCalendar( );"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
[/html]
Comment