Question

Thank you very much in advance for reading.

I’m programming a web application in Struts.

I’m using a JQuery datepicker 1.7 as a calendar on the sidebar on the user’s view. (It’s the best option I could find)

I would like to highlight in the calendar a group of days starting from initial date (startDate) until the end (endDate) of several reminders I have in an array. This way, the user will be able to see on the calendar of the application, all the available days he has left in order to take action for each of his reminders.

I already have my array of reminders which I can access from the view. I was able to implement it properly thanks to guidance from a great fellow around here.

This is my javascript function for the datepicker:

$(function(){

            $('#datepicker').datepicker({
                flat: true,
                numberOfMonths: [1,1],
                dateFormat: 'dd/mm/yy',
                beforeShowDay: highlightDays
            });

There is another function, namely, highlightDays which is the one that is causing me trouble:

It’s parameter is the array “reminders” such that reminders[i].start is the startDate, and reminders[i].end is the endDate of reminder i, with i = number of reminders in the array.

function highlightDays(reminders) {
            for (var i = 0; i < reminders.length; i++) { 

                /** Below:
                 *If startDate is smaller than endDate,
                 *then highlight the days inbetween.
                 */

                if (new Date(reminders[i].start).toString() <= 
                    new Date(reminders[i].end).toString() ){              
                   return [true, 'ui-state-highlight'];
                 }
            } //Otherwise do not highlight
            return [true, ''];
       } 

The problem is the calendar won’t even show up when I open the application and log in. And the Apache Log or output do not show any errors. I’d like to know, where do you think I might be wrong? I will keep investigating, but I’d really appreciate your input!

P.D: I can access the elements of the array of reminders (endDate, startDate) and print these dates on screen, so that means the reminders array is not empty.

Thank you once again for taking the time to read.

Answer 1

From http://jqueryui.com/demos/datepicker/#event-beforeShowDay

The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or ” for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

Your callback function is not accepting a single date as a parameter, it’s taking an array of date ranges.

You might want to figure out how to call the highlightdays function inside the loop of remdinder values.