PDA

View Full Version : Disable onclick event in JScript Calendar



MicroNut
04-03-2009, 02:49 PM
I was wondering if someone could help me out. I am new to jscript and I need to modify a calendar onclick event. We have a calendar which displays the dates either in green or red based upon data from a string variable:

Valiable example: var t = tDate;
tDate = "4/10/2009,4/24/2009,5/8/2009,5/22/2009"

The code is written to find a date in the tDate string, then the day number is Green or Red.

My question is that the jscript makes all cells have an onclick event to place the selected date value in a list box. I would like to turn off the onclick event for any cell that is not in the tDate string. The attached code first draws the calendar with the current month days. Then if you change months the calendar will use a update function which is using (element.innertext) update to change the values in the cells.

Any help would be greatly appreciated.


ASP Contents:
<script language="JavaScript">
var dCurDate = new Date();
var arySeletedDate=new Array();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>

***********************************************
Attached is the jscript file (Multi_picker.js) code.

var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();
var arySelectedDays = new Array();



function fToggleColor(myElement) {

var toggleColor = "#0000ff";
if (myElement.id == "calDateText") {
if (myElement.color == toggleColor) {
myElement.color = "";
} else {
myElement.color = toggleColor;
}
} else if (myElement.id == "calCell") {
for (var i in myElement.children) {
if (myElement.children[i].id == "calDateText") {
if (myElement.children[i].color == toggleColor) {
myElement.children[i].color = "";
} else {
myElement.children[i].color = toggleColor;
}
}
}
}
}
function fSetSelectedDay(myElement){

if (myElement.id.toString().substr(0,myElement.id.toString().length-3) == "calCell") {
if (!isNaN(parseInt(myElement.children[0].innerText))) {

//toggles back ground color after click
myElement.bgColor = "#00FF00";

var strDay=myElement.children[0].innerText;

if(strDay.length<2) strDay="0"+strDay;
var strReturnDate = document.all.tbSelMonth.options[document.all.tbSelMonth.selectedIndex].value+"/"+strDay+"/"+document.all.tbSelYear.options[document.all.tbSelYear.selectedIndex].value
if(document.all.traDate.value.indexOf(strReturnDate,0)>-1){
myElement.bgColor="";
document.all.traDate.value = document.all.traDate.value.substr(0,document.all.traDate.value.indexOf(strReturnDate,0)) + document.all.traDate.value.substr(document.all.traDate.value.indexOf(strReturnDate,0)+12,document.all.traDate.value.length);
}else{
document.all.traDate.value+=strReturnDate+"\n";
}
//objPrevElement.bgColor = "";
objPrevElement = myElement;
}
}

}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fBuildCal(iYear, iMonth, iDayStyle) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);

var iVarDate = 1;
var i, d, w;
if (iDayStyle == 2) {
aMonth[0][0] = "<font color=red>Sunday</font>";
aMonth[0][1] = "Monday";
aMonth[0][2] = "Tuesday";
aMonth[0][3] = "Wednesday";
aMonth[0][4] = "Thursday";
aMonth[0][5] = "Friday";
aMonth[0][6] = "<font color=red>Saturday</font>";
} else if (iDayStyle == 1) {
aMonth[0][0] = "<font color=red>Sun</font>";
aMonth[0][1] = "Mon";
aMonth[0][2] = "Tue";
aMonth[0][3] = "Wed";
aMonth[0][4] = "Thu";
aMonth[0][5] = "Fri";
aMonth[0][6] = "<font color=red>Sat</font>";
} else {
aMonth[0][0] = "<font color=red>Su</font>";
aMonth[0][1] = "Mo";
aMonth[0][2] = "Tu";
aMonth[0][3] = "We";
aMonth[0][4] = "Th";
aMonth[0][5] = "Fr";
aMonth[0][6] = "<font color=red>Sa</font>";

}
//Days of the month
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
//alert (iVarDate)
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
//alert (iVarDate)
}
}
}
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
var myMonth;
//var iFontColor = "#000000"; //Black
var iFontColorGood = "#006600"; //Green
var iFontColorBad = "#FF0000"; //Red
var iFontWeight = "normal";

//Data from route calendar table
var t = tDate;

myMonth = fBuildCal(iYear, iMonth, iDayStyle);
document.write("<table border='1'>")
document.write("<tr>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
document.write("</tr>");



for (w = 1; w < 7; w++) {

document.write("<tr>")
for (d = 0; d < 7; d++) {
document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell_"+w+d+" style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
if (!isNaN(myMonth[w][d])) {
var sString = (tDate.search(iMonth+"/"+myMonth[w][d]+"/"+iYear)); //searches string for each date
if (sString>=0) {
document.write("<font id=calDateText onMouseOver='fToggleColor(this); window.status=this.id;' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + ";COLOR:" + iFontColorGood + "' onMouseOut='fToggleColor(this)'>" + myMonth[w][d] + "</font>");
} else {
document.write("<font id=calDateText onMouseOver='fToggleColor(this); window.status=this.id;' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + ";COLOR:" + iFontColorBad + "' onMouseOut='fToggleColor(this)'>" + myMonth[w][d] + "</font>");
}

} else {
document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)')> </font>");
}
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>")

}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
objPrevElement.bgColor = "";
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (!isNaN(myMonth[w][d])) {
var sString = (tDate.search(iMonth+"/"+myMonth[w][d]+"/"+iYear));
if (sString>=0) {
calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
calDateText[((7*w)+d)-7].style.color = 'green';
} else {
//calDateText[((7*w)+d)-7].innerText = myMonth[w][d] + "x";
calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
calDateText[((7*w)+d)-7].style.color = 'red';
//calDateText[((7*w)+d)-7].style.fontWeight = 'normal';
}
} else {
calDateText[((7*w)+d)-7].innerText = "";
}
}
}
}
function EnterToBR(strMEMO){
var str1=new String(strMEMO);
//alert (str1);
var str2 = "";
for(var i=0;i<str1.length;i++){
if(str1.charCodeAt(i)=="13")
str2=str2+"<br>";
//str2=str2+",";
else if(str1.charCodeAt(i)=="10")
str2=str2;
else
str2=str2+str1.charAt(i);
}
//alert(str2);
return (str2);
}