Problem with calendar functionality

Hi,

I have done the javascript event calendar. And it works fine.In that code i add the drop down list to select the month based on that calendar will change .For that i use select tag and include option tags and i use the function as onChange="changedate()".But it will not effect.Plz tell that whats the mistake in my code.

[javascript]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sayhi</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" src="events.js"></script>

<script type="text/JavaScript" language="JavaScript">

var thisDate = 1; // Tracks current date being written in calendar
var wordMonth = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var today = new Date(); // Date object to store the current date
var todaysDay = today.getDay() + 1; // Stores the current day number 1-7
var todaysDate = today.getDate(); // Stores the current numeric date within the month
var todaysMonth = today.getUTCMonth() + 1; // Stores the current month 1-12
var todaysYear = today.getFullYear(); // Stores the current year
var monthNum = todaysMonth; // Tracks the current month being displayed
var yearNum = todaysYear; // Tracks the current year being displayed
var firstDate = new Date(String(monthNum)+"/1/"+String(yearNum)); // Object Storing the first day of the current month
var firstDay = firstDate.getUTCDay(); // Tracks the day number 1-7 of the first day of the current month
var lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum)); // Tracks the last date of the current month
var numbDays = 0;
var calendarString = "";
var eastermonth = 0;
var easterday = 0;
var date =0;
var event8="";
var events1="hello";

events = new Array(
["Y", "11", "8", "2008", "1:00 AM", "12:59 PM", "beautiful day", "aweewwewweeweweww"],
["Y", "11", "22", "2008", "1:00 AM", "12:59 PM", "beautiful days", "wewewewewewqwewwew"]

// Please omit the final comma after the ] from the last line above unless you are going to add another event at this time.
);
function changedate(buttonpressed) {
if (buttonpressed == "prevyr") yearNum--;
else if (buttonpressed == "nextyr") yearNum++;
else if (buttonpressed == "prevmo") monthNum--;
else if (buttonpressed == "nextmo") monthNum++;
else if (buttonpressed == "nextmo1") {
monthNum=document.getElementById("select3");

}
else if (buttonpressed == "return") {
monthNum = todaysMonth;
yearNum = todaysYear;
}

if (monthNum == 0) {
monthNum = 12;
yearNum--;
}
else if (monthNum == 13) {
monthNum = 1;
yearNum++
}

lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum));
numbDays = lastDate.getDate();
firstDate = new Date(String(monthNum)+"/1/"+String(yearNum));
firstDay = firstDate.getDay() + 1;
createCalendar();
return;
}

function easter(year) {
// feed in the year it returns the month and day of Easter using two GLOBAL variables: eastermonth and easterday
var a = year % 19;
var b = Math.floor(year/100);
var c = year % 100;
var d = Math.floor(b/4);
var e = b % 4;
var f = Math.floor((b+8) / 25);
var g = Math.floor((b-f+1) / 3);
var h = (19*a + b - d - g + 15) % 30;
var i = Math.floor(c/4);
var j = c % 4;
var k = (32 + 2*e + 2*i - h - j) % 7;
var m = Math.floor((a + 11*h + 22*k) / 451);
var month = Math.floor((h + k - 7*m + 114) / 31);
var day = ((h + k - 7*m +114) % 31) + 1;
eastermonth = month;
easterday = day;
}

function createCalendar() {
calendarString = '';
var daycounter = 0;
calendarString +='<tr>';
calendarString +='<td class=\"tdpad\" colspan=\"2\">';
calendarString +='<table width=\"741\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">';
calendarString +='<tr>';
calendarString +='<td height=\"20\" colspan=\"4\" valign=\"top\"><a class=\"breadlink\" href=\"#\">Home</a> - Calender of Events</td>';
calendarString +='</tr>';
calendarString +='<tr>';
calendarString +='<td width=\"21%\" height=\"30\"><font class=\"calender\">'+ wordMonth[monthNum-1]+ yearNum+'</font></td>';
calendarString +='<td colspan=\"3\" align=\"right\">';
calendarString +='<input class=\"btn2\" type=\"submit\" name=\"Submit\" value=\"Import Events\" />';
calendarString +='<input class=\"btn2\" type=\"submit\" name=\"Submit2\" value=\"Open Window\" />';
calendarString +='</td>';
calendarString +='</tr>';
calendarString +='<tr>';
calendarString +='<td height=\"30\"><a href=\"#\" class=\"etext\">Month</a> - <a href=\"#\" class=\"etext\">Week</a> - <a href=\"#\" class=\"etext\">Day</a></td>';
calendarString +='<td width=\"47%\" align=\"center\">';
calendarString +='<a class=\"etext\" href=\"#\" onClick=\"changedate(\'prevmo\')\"><<< Previous</a>';
calendarString +='<select name=\"select3\" id=\"select3\" onChange=\"changedate(\'nextmo1\')\">';
calendarString +='<option value='+ wordMonth[monthNum-1]+'>'+ wordMonth[monthNum-1]+'</option>';
calendarString +='<option value='+ wordMonth[monthNum-2]+'>'+ wordMonth[monthNum-2]+'</option>';
calendarString +='<option value='+ wordMonth[monthNum-3]+'>'+ wordMonth[monthNum-3]+'</option>';
calendarString +='<option value='+ wordMonth[monthNum-4]+'>'+ wordMonth[monthNum-4]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-5]+'>'+ wordMonth[monthNum-5]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-6]+'>'+ wordMonth[monthNum-6]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-7]+'>'+ wordMonth[monthNum-7]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-8]+'>'+ wordMonth[monthNum-8]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-9]+'>'+ wordMonth[monthNum-9]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-10]+'>'+ wordMonth[monthNum-10]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum-11]+'>'+ wordMonth[monthNum-11]+'</option>';
calendarString +='<option name='+ wordMonth[monthNum]+'>'+ wordMonth[monthNum]+'</option>';
calendarString +='</select>';
calendarString +='<select name=\"select4\">';
calendarString +='<option>'+ yearNum+'</option>';
calendarString +='</select>';
calendarString +='<a class=\"etext\" href=\"#\" onClick=\"changedate(\'nextyr\')\">Next >>></a>';
calendarString +='</td>';
calendarString +='<td width=\"27%\">';
calendarString +='<a href=\"#\" class=\"etext\">Login</a> - <a href=\"#\" class=\"etext\">Search</a>';
calendarString +='<select name=\"select\">';
calendarString +='<option>Hi-Radar Events</option>';
calendarString +='</select>';
calendarString +='</td>';
calendarString +='<td>';
calendarString +='<input name=\"image\" type=\"image\" value=\"Submit\" src=\"images/search.gif\" />';
calendarString +='</td>';
calendarString +='</tr>';

calendarString +='</table>';
calendarString +='</td>';
calendarString += '</tr>';
calendarString += '<tr>';
calendarString += '<td style=\"padding-right:12px;\" height=\"26\" align=\"right\" ><a class=\"elink\" href=\"#\">View Open-Win</a> - <a class=\"elink\" href=\"#\">Manage Open-Win</a> - <a class=\"elink\" href=\"#\">Browse Open-Win</a> - <a class=\"elink\" href=\"#\">View My Bookmark</a></td>';
calendarString +='</tr>';

calendarString += '<table width="741" height="630" border="0" cellpadding="0" cellspacing="1">';

calendarString += '<tr>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Sunday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Monday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Tuesday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Wednesday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Thursday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Friday</td>';
calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Saturday</td>';
calendarString += '</tr>';

thisDate == 1;

for (var i = 1; i <= 6; i++) {
calendarString += '<tr>';
for (var x = 1; x <= 7; x++) {
daycounter = (thisDate - firstDay)+1;
thisDate++;
if ((daycounter > numbDays) || (daycounter < 1)) {
calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\"> <\/td>';
} else {
if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){
if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) {
calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">&nbsp</td>';
}
else{
var showevent=showevents(daycounter,monthNum,yearNum,"i","x");
calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">'+ showevent + daycounter + '<\/td>';
var showevent=showevents(daycounter,monthNum,yearNum,"i","x");
}
} else {
calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">' + daycounter + '<\/td>';
}
}
}
calendarString += '<\/tr>';
}

'<\/table>';

var object=document.getElementById('calendar');
object.innerHTML= calendarString;
thisDate = 1;
}

function checkevents(day,month,year,week,dayofweek) {
var numevents = 0;
var floater = 0;
for (var i = 0; i < events.length; i++) {
document.write(events[0][0]);

if (events[0][0] == "W") {
if ((events[0][2] == dayofweek)) numevents++;
}
else if (events[0][0] == "Y") {

if ((events[0][2] == day) && (events[0][1] == month) && (events[0][3] == year) ) numevents++;
}
else if (events[0][0] == "F") {
if ((events[0][1] == 3) && (events[0][2] == 0) && (events[0][3] == 0) ) {
easter(year);
if (easterday == day && eastermonth == month) numevents++;
} else {
floater = floatingholiday(year,events[1],events[2],events[3]);
if ((month == 5) && (events[1] == 5) && (events[2] == 4) && (events[3] == 2)) {
if ((floater + 7 <= 31) && (day == floater + 7)) {
numevents++;
} else if ((floater + 7 > 31) && (day == floater)) numevents++;
} else if ((events[0][1] == month) && (floater == day)) numevents++;
}
}
else if ((events[0][2] == day) && (events[0][1] == month) && (events[0][3] == year)) {
numevents++;

}
}

if (numevents == 0) {
return false;
} else {
return true;
}

}

function showevents(day,month,year,week,dayofweek) {
var theevent = "";
var floater = 0;
var eventhan="ww";
for (var i = 0; i < events.length; i++) {
if (events[0] != "") {
// First we'll process recurring events (if any):
if (events[0] == "Y") {
if ((events[2]==day) && (events[1] == month) && (events[3] == year) ) {

theevent += events[6] + '\n';
theevent += '\n -------------- \n\n';

return theevent;
}
}
}
}
}

function floatingholiday(targetyr,targetmo,cardinaloccurrence,targetday) {
// Floating holidays/events of the events.js file uses:
// the Month field for the Month (here it becomes the targetmo field)
// the Day field as the Cardinal Occurrence (here it becomes the cardinaloccurrence field)
// 1=1st, 2=2nd, 3=3rd, 4=4th, 5=5th, 6=6th occurrence of the day listed next
// the Year field as the Day of the week the event/holiday falls on (here it becomes the targetday field)
// 1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
// example: "F", "1", "3", "2", = Floating holiday in January on the 3rd Monday of that month.
//
// In our code below:
// targetyr is the active year
// targetmo is the active month (1-12)
// cardinaloccurrence is the xth occurrence of the targetday (1-6)
// targetday is the day of the week the floating holiday is on
// 0=Sun; 1=Mon; 2=Tue; 3=Wed; 4=Thu; 5=Fri; 6=Sat
// Note: subtract 1 from the targetday field if the info comes from the events.js file
//
// Note:
// If Memorial Day falls on the 22nd, 23rd, or 24th, then we add 7 to the dayofmonth to the result.
//
// Example: targetyr = 2052; targetmo = 5; cardinaloccurrence = 4; targetday = 1
// This is the same as saying our floating holiday in the year 2052, is during May, on the 4th Monday
//
var firstdate = new Date(String(targetmo)+"/1/"+String(targetyr)); // Object Storing the first day of the current month.
var firstday = firstdate.getUTCDay(); // The first day (0-6) of the target month.
var dayofmonth = 0; // zero out our calendar day variable.

targetday = targetday - 1;

if (targetday >= firstday) {
cardinaloccurrence--; // Subtract 1 from cardinal day.
dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
} else {
dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
}
return dayofmonth;
}
</script>
</head>

<body class="homebg" onload="changedate('return')">
<%@ include file="includes/header.jsp" %>
<table width="781" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="intab" align="left" valign="top"><table width="765" border="0" cellspacing="0" cellpadding="0">

<tr>
<td class="tdpad2" align="left" valign="top">

<center>
<table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="584">
<tbody>
<tr>
<td style="padding: 3px;" align="center" bgcolor="#FFFFFF" valign="top" width="314">
<div id="calendar"></div>
</td>
<td width="10"> </td>

</tr>
</tbody>
</table>
</center>

</td>
</tr>
</table></td>
</tr>
</table>
<%@ include file="includes/footer.jsp" %>
</body>
</html>

[/javascript]

Anybody could you plz advice what changes i have to make

Log in or Sign up

Problem with calendar functionality

swethak Peon

Log in or Sign up

Problem with calendar functionality

swethak Peon

Useful Searches