Question

I am trying to highlight events in a datepicker, but I cannot get it working. The events are in the calender (when I click on them all functionality is correct) just not highlighted. Here is how I attempt to highlight them:

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

        if (matching.length) {
            //Adds highlight to day
            result = [true, 'highlight', null];
        }
        return result;
    },

Any suggestions?

Answer 1

The way that you are using your var result variable is potentially quite risky.

This JSFiddle will show you how this is a problem. Click ‘Click1’ and it will alert ok, but clicking ‘Click2’ will alert nothing.

Declare the variable outside of your anonymous function function (date) {, i.e.

    var result = [true, '', null];

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

    if (matching.length) {
        //Adds highlight to day
        result = [true, 'highlight', null];
    }
    return result;
},