jquery datepicker highlight

I am trying to highlight the date for corresponding events in the database. My code is not working properly and in the datepicker only the date for the last event in the database is highlighted all the other events are not getting highlighted.please help me to find a solution.

 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) }, 

];

    } 
  } 
});
  }); 

Blockquote

Answers


Just try the code below, I have assumed your events array as static

<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> 

Need Your Help

Positioning and margins for a webpage recreation

css image html css-position

i'm attempting to recreate a webpage as part of my HTML/CSS training. The webpage in question is this: