Question

I’m using jqueryui for a datepicker and I have an array for the events from which I select the date to hilight in the calendar. Then I’d like to show as tooltip the “title” of the event in the array, I put now “events[0].title” that is the first element, but of course I need to get the element of the array matching the right date, how to do it?

$(function() {
    var events = [ 
        { title: "Concerto", Date: new Date("09/13/2011") }, 
        { title: "Dinner", Date: new Date("09/25/2011") }, 
        { title: "concert", Date: new Date("10/01/2011") }
    ];

    $.datepicker.setDefaults($.datepicker.regional['it']);   

    $("#datepicker").datepicker({
        dateFormat: 'dd-mm-yy',
        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', events[0].title];
                return result;
            }
            return [false,''];
        }    
    });
});

Answer 1

You just need to pull out the title that was matched with grep instead of the event title. Try changing to this:

var matching = $.grep(events, function(event) {
    return event.Date.valueOf() === date.valueOf();
});

if (matching.length) {
    result = [true, 'highlight', matching[0].title];
    return result;
}

(Just try changing events[0].title to matching[0].title