Hello,
I have developed a calendar program in Javascript which opens a calendar as a popup window and when a user clicks on a date the date is copied into the parent windows textbox.
The code of the parent window is as follows -->
- <html>
-
<head>
-
<title>calendar</title>
-
</head>
-
-
<body>
-
<input type="text" name="parent"/>
-
<a href="javascript:void(0);" onClick=window.open("cal_popup.html");>Click here to open the calendar window</a>
-
</body>
-
-
</html>
The code of the popup window is like this -->
- <html>
-
-
<head>
-
<title>Calendar</title>
-
<script language="javascript" type="text/javascript">
-
-
function post_value(mm,dt,yy){
-
opener.document.parent.value = mm + "/" + dt + "/" + yy;
-
self.close();
-
}
-
-
-
function gen_cal(prm,chm) {
-
myDate = new Date();
-
-
var m,d,y;
-
if(prm){
-
m=prm+chm;
-
}
-
else{
-
m= myDate.getMonth();
-
}
-
-
d= myDate.getDate(); // Finds today's date
-
y= myDate.getFullYear(); // Finds today's year
-
-
var string = new Date(y,m,d);
-
var newstring = string.toString();
-
var string_array = newstring.split(" ");
-
-
-
// mn --> Month is calculated to display at the top of the calendar for eg: Jan
-
var mn = string_array[1];
-
-
//yn--> Year is calculated to display at the top of the calendar for eg: 2007
-
var yn = string_array[5];
-
-
//no_of_days -->This is to calculate number of days in a month
-
var no_of_days;
-
if(mn == "Jan" || mn == "Mar" || mn == "May" || mn == "Jul" || mn == "Aug" || mn == "Oct" || mn == "Dec")
-
no_of_days = 31;
-
if(mn == "Apr" || mn == "Jun" || mn == "Sep" || mn == "Nov")
-
no_of_days = 30;
-
if(mn == "Feb")
-
if(yn % 4 == 0)
-
no_of_days = 29;
-
else
-
no_of_days = 28;
-
-
//j--> This will have the week day of the first day of the month
-
myArray = new Array("Sun", "Mon", "Tue", "Wed", "Thu","Fri", "Sat");
-
myDate1 = new Date(y,m,1);
-
var newdate1 = myDate1.toString();
-
var string_date = newdate1.split(" ");
-
var j = string_date[0];
-
-
for(i=0;i<myArray.length;i++) {
-
if(myArray[i] == j)
-
j=i;
-
}
-
-
var adj = "<td> </td>";
-
for(k=2; k<=j; k++){ // Adjustment of date starting
-
adj = adj + "<td> </td>";
-
}
-
-
// Starting of top line showing name of the days of the week
-
-
document.write(" <table border='1' bordercolor='#FFFF00' cellspacing='0' cellpadding='0' align=center><tr><td>");
-
-
document.write("<table cellspacing='0' cellpadding='0' align=center width='100' border='1'><td align=center bgcolor='#ffff00'><font size='3' face='Tahoma'> <a href='javascript:gen_cal("+m+",-1);'><</a> </td><td colspan=5 align=center bgcolor='#ffff00'><font size='3' face='Tahoma'>" + mn + yn + "</td><td align=center bgcolor='#ffff00'><font size='3' face='Tahoma'> <a href='javascript:gen_cal("+m+",1);'>></a> </td></tr><tr>");
-
-
document.write("<td><font size='3' face='Tahoma'><b>Sun</b></font></td><td><font size='3' face='Tahoma'><b>Mon</b></font></td><td><font size='3' face='Tahoma'><b>Tue</b></font></td><td><font size='3' face='Tahoma'><b>Wed</b></font></td><td><font size='3' face='Tahoma'><b>Thu</b></font></td><td><font size='3' face='Tahoma'><b>Fri</b></font></td><td><font size='3' face='Tahoma'><b>Sat</b></font></td></tr><tr>");
-
-
////// End of the top line showing name of the days of the week//////////
-
-
//////// Starting of the days//////////
-
var pv;
-
for(i=1;i<=no_of_days;i++){
-
pv = m + "," + i + "," + yn;
-
document.write(adj + "<td valign=top><font size='2' face='Tahoma'><a href='#'onClick='post_value("+pv+");'>" + i + "</a><br>");
-
// This will display the date inside the calendar cell
-
document.write(" </font></td>");
-
adj='';
-
j++;
-
if(j==7){
-
document.write("</tr><tr>");
-
j=0;
-
}
-
}
-
document.write("</tr></table></td></tr></table>");
-
}
-
-
-
</script>
-
</head>
-
-
<body onLoad="javascript:gen_cal();">
-
</body>
-
</html>
Please copy them in two files and run in IE .
There are 2 PROBLEMS -->
1.The month navigation is not working .
2. When we click on a date it should get copied inside a textbox which is not happening.
Please help me in solving this as its very urgent.
