title: jquery datepicker highlight holidays
body: <p>I am trying to make a  jquery datepicker calendar that would highlight holidays and  make the holiday name as a tooltip when the day on the datepicker is hovered. The holiday dates came from a php file ( holidays.php ).  My problem is..I can't seem to highlight ALL the holidays instead, it highlights just one date.  More specifically, just the first returned date. </p>
  
  <pre><code>$(document).ready(function (){
    var holiDays = (function () {
      var val = null;
      $.ajax({
          'async': false,
          'global': false,
          'url': 'holidays.php',
          'success': function (data) {
          val = data;
          }
      });
      return val;
      })();
  
    var result = [];
    var holiDays = holiDays.split(',');
  
   var s, k;
  
      for (s = 0, k = -1; s &lt; holiDays.length; s++) {
          if (s % 4 === 0) {
              k++;
              result[k] = [];
          }
  
          result[k].push(holiDays[s]);
      }
  
    // This for loop is to check whether the values stored in result[] are correct
  
    for (i = 0; i &lt; result.length; i++) {
    var f=result[i][0]+"-"+result[i][1]+"-"+result[i][2];
    alert(f); 
    }
  
  
    function nationalDays(date) {
      var m = date.getMonth();
      var d = date.getDate();
      var y = date.getFullYear();
  
    for (i = 0; i &lt; result.length; i++) {
    var f=result[i][0]+"-"+result[i][1]+"-"+result[i][2];
   // WHEN I ALERT THE VALUE OF f HERE, 
   // IT ALWAYS DISPLAY THE FIRST VALUE IN THE RESULT ARRAY. WHY?
   alert(f);
  
    var d = new Date(f);
  
                   if (date.getFullYear() == d.getFullYear()
                        &amp;&amp; date.getMonth() == d.getMonth()
                        &amp;&amp; date.getDate() == d.getDate()) {
                      return [true, 'holiday', result[i][3]];
                   } else {
                    return [true];
                   }
                 } 
  
    }
  
  
    $(function() { 
          $('input.pickerClass').live('click', function() {
              $(this).datepicker({dateFormat: 'yy-mm-dd', beforeShowDay: nationalDays  }).focus();
          });
  
    });
  
  
  
  });
  </code></pre>
  
  <p>when I alert the values inside the array <code>result[]</code> outside of the nationalDays function, the values stored seemed to be correct.</p>
  
  <pre><code>  for (i = 0; i &lt; result.length; i++) {
    var f=result[i][0]+"-"+result[i][1]+"-"+result[i][2];
    alert(f); 
    }
  </code></pre>
  
  <p>but for some reason, when I alert the values of the <code>result[]</code>  INSIDE the for loop under the nationalDays function, it only returns the first date stored in the array result[]. But why? </p>
  
  <p>Anyone has ideas?.. I would appreciate it so much. :)</p>