Question

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.

$(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 < 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 < 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 < 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()
                      && date.getMonth() == d.getMonth()
                      && 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();
        });

  });



});

when I alert the values inside the array result[] outside of the nationalDays function, the values stored seemed to be correct.

  for (i = 0; i < result.length; i++) {
  var f=result[i][0]+"-"+result[i][1]+"-"+result[i][2];
  alert(f); 
  }

but for some reason, when I alert the values of the result[] INSIDE the for loop under the nationalDays function, it only returns the first date stored in the array result[]. But why?

Anyone has ideas?.. I would appreciate it so much. 🙂

Answer 1

I already know where I’ve gone wrong.

if (date.getFullYear() == d.getFullYear()
                      && date.getMonth() == d.getMonth()
                      && date.getDate() == d.getDate()) {
                    return [true, 'holiday', result[i][3]];
                 } else {
                  return [true];
                 }

Should have been

if (date.getFullYear() == d.getFullYear()
                      && date.getMonth() == d.getMonth()
                      && date.getDate() == d.getDate()) {
                    return [true, 'holiday', result[i][3]];
                 } 
                  return [true];

I just removed the else statement and it worked!