By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,036 Members | 1,142 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,036 IT Pros & Developers. It's quick & easy.

Disable on-click event in jscript calendar

P: 2
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:

Expand|Select|Wrap|Line Numbers
  1. Valiable example: var t = tDate;
  2. 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.

Expand|Select|Wrap|Line Numbers
  1. var dDate = new Date();
  2. var dCurMonth = dDate.getMonth();
  3. var dCurDayOfMonth = dDate.getDate();
  4. var dCurYear = dDate.getFullYear();
  5. var objPrevElement = new Object();
  6. var arySelectedDays = new Array();
  7.  
  8.  
  9.  
  10. function fToggleColor(myElement) {
  11.  
  12.  var toggleColor = "#0000ff";
  13.  if (myElement.id == "calDateText") {
  14.   if (myElement.color == toggleColor) {
  15.    myElement.color = "";
  16.   } else {
  17.    myElement.color = toggleColor;
  18.   }
  19.  } else if (myElement.id == "calCell") {
  20.   for (var i in myElement.children) {
  21.    if (myElement.children[i].id == "calDateText") {
  22.     if (myElement.children[i].color == toggleColor) {
  23.      myElement.children[i].color = "";
  24.     } else {
  25.      myElement.children[i].color = toggleColor;
  26.     }
  27.    }
  28.   }
  29.  }
  30. }
  31. function fSetSelectedDay(myElement){
  32.  
  33.  if (myElement.id.toString().substr(0,myElement.id.toString().length-3) == "calCell") {
  34.   if (!isNaN(parseInt(myElement.children[0].innerText))) {
  35.  
  36.       //toggles back ground color after click
  37.    myElement.bgColor = "#00FF00";
  38.  
  39.    var strDay=myElement.children[0].innerText;
  40.  
  41.    if(strDay.length<2) strDay="0"+strDay;
  42.    var strReturnDate = document.all.tbSelMonth.options[document.all.tbSelMonth.selectedIndex].value+"/"+strDay+"/"+document.all.tbSelYear.options[document.all.tbSelYear.selectedIndex].value   
  43.    if(document.all.traDate.value.indexOf(strReturnDate,0)>-1){
  44.     myElement.bgColor="";
  45.     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);
  46.    }else{
  47.     document.all.traDate.value+=strReturnDate+"\n";
  48.    }
  49.    //objPrevElement.bgColor = "";
  50.    objPrevElement = myElement;
  51.      }
  52.  }
  53.  
  54. }
  55. function fGetDaysInMonth(iMonth, iYear) {
  56.  var dPrevDate = new Date(iYear, iMonth, 0);
  57.  return dPrevDate.getDate();
  58. }
  59. function fBuildCal(iYear, iMonth, iDayStyle) {
  60.  var aMonth = new Array();
  61.  aMonth[0] = new Array(7);
  62.  aMonth[1] = new Array(7);
  63.  aMonth[2] = new Array(7);
  64.  aMonth[3] = new Array(7);
  65.  aMonth[4] = new Array(7);
  66.  aMonth[5] = new Array(7);
  67.  aMonth[6] = new Array(7);
  68.  var dCalDate = new Date(iYear, iMonth-1, 1);
  69.  var iDayOfFirst = dCalDate.getDay();
  70.  var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
  71.  
  72.  var iVarDate = 1;
  73.  var i, d, w;
  74.  if (iDayStyle == 2) {
  75.   aMonth[0][0] = "<font color=red>Sunday</font>";
  76.   aMonth[0][1] = "Monday";
  77.   aMonth[0][2] = "Tuesday";
  78.   aMonth[0][3] = "Wednesday";
  79.   aMonth[0][4] = "Thursday";
  80.   aMonth[0][5] = "Friday";
  81.   aMonth[0][6] = "<font color=red>Saturday</font>";
  82.  } else if (iDayStyle == 1) {
  83.   aMonth[0][0] = "<font color=red>Sun</font>";
  84.   aMonth[0][1] = "Mon";
  85.   aMonth[0][2] = "Tue";
  86.   aMonth[0][3] = "Wed";
  87.   aMonth[0][4] = "Thu";
  88.   aMonth[0][5] = "Fri";
  89.   aMonth[0][6] = "<font color=red>Sat</font>";
  90.  } else {
  91.   aMonth[0][0] = "<font color=red>Su</font>";
  92.   aMonth[0][1] = "Mo";
  93.   aMonth[0][2] = "Tu";
  94.   aMonth[0][3] = "We";
  95.   aMonth[0][4] = "Th";
  96.   aMonth[0][5] = "Fr";
  97.   aMonth[0][6] = "<font color=red>Sa</font>";
  98.  
  99.  }
  100.  //Days of the month
  101.  for (d = iDayOfFirst; d < 7; d++) {
  102.   aMonth[1][d] = iVarDate;
  103.        //alert (iVarDate)
  104.   iVarDate++;
  105.  }
  106.  for (w = 2; w < 7; w++) {
  107.   for (d = 0; d < 7; d++) {
  108.    if (iVarDate <= iDaysInMonth) {
  109.     aMonth[w][d] = iVarDate;
  110.     iVarDate++;
  111.        //alert (iVarDate)                   
  112.      }
  113.    }
  114.  }
  115.  return aMonth;
  116. }
  117. function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
  118.  var myMonth;
  119.  //var iFontColor = "#000000"; //Black
  120.  var iFontColorGood = "#006600"; //Green
  121.  var iFontColorBad = "#FF0000"; //Red
  122.  var iFontWeight = "normal";
  123.  
  124.  //Data from route calendar table
  125.  var t = tDate;
  126.  
  127.  myMonth = fBuildCal(iYear, iMonth, iDayStyle);
  128.  document.write("<table border='1'>")
  129.  document.write("<tr>");
  130.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
  131.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
  132.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
  133.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
  134.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
  135.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
  136.  document.write("<td align='center' bgcolor=#C0C0C0 style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
  137.  document.write("</tr>");
  138.  
  139.  
  140.  
  141.  for (w = 1; w < 7; w++) {
  142.  
  143.   document.write("<tr>")
  144.   for (d = 0; d < 7; d++) {
  145.    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)>");
  146.    if (!isNaN(myMonth[w][d])) {  
  147.     var sString = (tDate.search(iMonth+"/"+myMonth[w][d]+"/"+iYear)); //searches string for each date
  148.      if (sString>=0) {
  149.       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>");
  150.      } else {
  151.       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>");
  152.      } 
  153.  
  154.    } else {
  155.      document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize +  ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)')> </font>");      
  156.    }    
  157.    document.write("</td>")
  158.   }
  159.   document.write("</tr>");
  160.  }
  161.  document.write("</table>")
  162.  
  163. }
  164. function fUpdateCal(iYear, iMonth) {
  165.  myMonth = fBuildCal(iYear, iMonth);
  166.  objPrevElement.bgColor = "";
  167.  for (w = 1; w < 7; w++) {
  168.   for (d = 0; d < 7; d++) {
  169.    if (!isNaN(myMonth[w][d])) {
  170.     var sString = (tDate.search(iMonth+"/"+myMonth[w][d]+"/"+iYear));
  171.     if (sString>=0) {
  172.      calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
  173.      calDateText[((7*w)+d)-7].style.color = 'green';
  174.     } else {
  175.      //calDateText[((7*w)+d)-7].innerText = myMonth[w][d] + "x";
  176.      calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
  177.      calDateText[((7*w)+d)-7].style.color = 'red';
  178.      //calDateText[((7*w)+d)-7].style.fontWeight = 'normal';   
  179.     }
  180.    } else {
  181.     calDateText[((7*w)+d)-7].innerText = "";
  182.    }
  183.   }
  184.  }
  185. }
  186. function EnterToBR(strMEMO){
  187.  var str1=new String(strMEMO);
  188.  //alert (str1);
  189.  var str2 = "";  
  190.  for(var i=0;i<str1.length;i++){
  191.   if(str1.charCodeAt(i)=="13")
  192.    str2=str2+"<br>";
  193.    //str2=str2+",";
  194.   else if(str1.charCodeAt(i)=="10")
  195.    str2=str2;
  196.   else
  197.    str2=str2+str1.charAt(i);
  198.  }
  199.  //alert(str2);
  200.  return (str2);
  201. }
Apr 3 '09 #1
Share this Question
Share on Google+
8 Replies


Expert 10K+
P: 11,448
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)
Apr 3 '09 #2

dmjpro
100+
P: 2,476
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.

Expand|Select|Wrap|Line Numbers
  1. var element_ref = ....
  2. element_ref.disabled = true;
  3.  
  4.  
  5. element_ref = ....
  6. element_ref = function(){} //nullify the event handler.
  7.  
Apr 4 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
about disabling event handlers: if you use addEventListener* to attach the event you can remove it by removeEventListener*
Expand|Select|Wrap|Line Numbers
  1. // attach event handler
  2. element.addEventListener("click", yourFunction, false);
  3.  
  4. // remove event handler
  5. element.removeEventListener("click", yourFunction, false);
* does not work in IE, use addEvent() for that (google)
Apr 4 '09 #4

dmjpro
100+
P: 2,476
@Dormilich
I think that would be attachEvent("onClick",handler) in IE.
Apr 4 '09 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Apr 4 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
@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?)
Apr 4 '09 #7

dmjpro
100+
P: 2,476
@acoder
Why did you say "innerText" is not supported by all browsers? I knew those which are text node support innerText.
Apr 6 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
both my JavaScript resources (SelfHTML & MDC) say that innerText is not supported by Mozilla and Opera.
Apr 6 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.