Disable on-click event in jscript calendar

[Arhaus]

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. Attached is the jscript 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);
}

[JosAH]

This is a Javascript question; not a Java question. Those two languages don't have much in common. I'll move this thread to its correct forum.

kind regards,

Jos (moderator)

[dmjpro]

Of f f ! ...... So long code. It's not quite easy to read.
If you want to disable the onClick event. Either make the element disable or nullify the element onClick event handler.

var element_ref = ....
element_ref.disabled = true;
 
 
element_ref = ....
element_ref = function(){} //nullify the event handler.
 

[Dormilich]

about disabling event handlers: if you use addEventListener* to attach the event you can remove it by removeEventListener*

// attach event handler
element.addEventListener("click", yourFunction, false);
 
// remove event handler
element.removeEventListener("click", yourFunction, false);

* does not work in IE, use addEvent() for that (google)

[dmjpro]

@Dormilich
I think that would be attachEvent("onClick",handler) in IE.

[acoder]

The code has so many problems, I almost wouldn't know where to start:

1. document.all - non-standard, few browsers support it
2. innerText - not supported by all browsers, use innerHTML which has wider support
3. The cursor property should be set to "pointer", not the non-standard "hand".
4. <font> tags are deprecated - use CSS instead

There's probably more things, but I only took a brief look.

[Dormilich]

@dmjpro
sure, but you need a function that works both in IE an the standard compliant browsers (why making a function of your own if there are well tried functions available?)

[dmjpro]

@acoder
Why did you say "innerText" is not supported by all browsers? I knew those which are text node support innerText.

[Dormilich]

@dmjpro
both my JavaScript resources (SelfHTML & MDC) say that innerText is not supported by Mozilla and Opera.