jquery datepicker高亮

Question

我正在尝试突出显示数据库中相应事件的日期。我的代码无法正常工作，并且在日期选择器中仅突出显示数据库中最后一个事件的日期，所有其他事件都没有突出显示。请帮助我找到解决方案。

 var row;          
      var title1 ;
      var date1;
         var events;

$(function() {
    $( "#datepicker" ).datepicker({ minDate:0,

    beforeShowDay: function(date) {
    var result = [true, '', null];
    var matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
    });

    if (matching.length) {
        result = [true, 'highlight', null];
    }
    return result;
},
onSelect: function(dateText) {
    var date,
        selectedDate = new Date(dateText),
        i = 0,
        event = null;

    /* Determine if the user clicked an event: */
    while (i < events.length && !event) {
        date = events[i].Date;

        if (selectedDate.valueOf() === date.valueOf()) {
            event = events[i];
        }
        i++;
    }
    if (event) {
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
        alert(event.Title);
    }
}
    }); 
});

 $(function () 
  {

$.ajax({                                      
  url: 'api.php', data: "", dataType: 'json',  success: function(rows)        
  {
    for (var i in rows)
    {
      row = rows[i];          

      title1 = row[0];
      date1 = row[1];

       events = [    
 { Title:"title1", Date: new Date(date1) }, 

];

    } 
  } 
});
  }); 

块引用

Answer 1

试试下面的代码，我假设你的事件数组是静态的

<script>
     var row;          
     var events = [    
                    { "Title":"title1", "Date": new Date("15/March/2014") },
                    { "Title":"title2", "Date": new Date("16/March/2014") },
                    { "Title":"title3", "Date": new Date("17/March/2014") },
                    { "Title":"title4", "Date": new Date("20/March/2014") }, 
                  ];

$(function() {
    $( "#datepicker" ).datepicker({ minDate:0,

    beforeShowDay: function(date) {
            var result = [true, '', null];
            var matching = $.grep(events, function(event) {
                if(event.Date.valueOf() === date.valueOf())
                    result = [true, 'highlight', event.Title];
            });
            return result;
        }
    }); 
});
</script>