Question

This is a bit involved, I’ll try to be as clear as possible. I’ll also preface by first saying that this is working as intended in Chrome and later versions of IE but not in Firefox or older IE, that’s the main thrust of my question.

I’ve added a jquery datepicker calendar to a page that has a list of events on it. The events have each been given names indicating the date they fall on and all have the css class “listing”. I created an array (listing) that grabs all of these events with getElementsByClassName(“listing”). I then created another array (events) and iterate through all the elements in ‘listing’ pushing an object into each element of the new array formatted for datepicker. Then I use this array (events) in the datepicker ‘beforeShowDay’ function to highlight/link all dates that have events.

Again, this works great in Chrome and newer IE but not Firefox (datepicker displays but no highlighted dates) or older IE versions (the datepicker calendar does not display). Any thoughts on how to get it working across all browsers?

Here’s my code:

$(document).ready(function() {

    var listing = document.getElementsByClassName("listing");
    var events = new Array();

    for (var i = 0; i < listing.length; i++) {
        // something wrong with this line...?
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }
    $("#calendar").datepicker({
        beforeShowDay: function(date) {
            var result = [false, '', 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 selectedDate = new Date(dateText);
        var day = selectedDate.getDate();
        var month = selectedDate.getMonth() + 1;
        var year = selectedDate.getFullYear();
        location.hash = "#" + month + "-" + day + "-" + year;
        //alert(month + "-" + day + "-" + year);
        }
    });

});

One thing I’ve noticed is that if I replace the for loop that generates the ‘events’ array with an explicit definition of each value it will work in Firefox but still not older IE.

In other words replacing this:

    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    };

With this:

    var events = [ 
        { Title: "Event 1", Date: new Date("9/12/2012") }, 
        { Title: "Event 2", Date: new Date("9/25/2012") }, 
        { Title: "Event 3", Date: new Date("9/29/2012") }
    ];

Thanks in advance for any help, haven’t had any luck finding answers anywhere.

---

Edit*:
Changed document.getElementsByClassName("listing"); to $(".listing"); working great in all versions of IE now (getElementsByClassName does not work in IE<9). Still no dates highlighting in FF. The only errors I’m seeing in FF console pertain to un-related CSS and prettyPhoto/slideshow js, don’t think these are related to this problem at all..?

---

Edit*:
Not sure if I should be replacing the content of my original question or appending, apologies if I’m making this too long… Continuing to try different things, still no luck. Everything is working fine in all browsers except for FF, the calendar pops up fine but no event dates are highlighted/linked. I tried explicitly filling the ‘events’ array instead of iteratively pushing into it and this works fine. Seems that the iterative push part is what’s not working in FF.

In other words, replacing this:

    var events = [];
    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }

With this:

    var events = [ 
        { Title: "Event 1", Date: new Date("9/20/2012") }, 
        { Title: "Event 2", Date: new Date("9/27/2012") }, 
        { Title: "Event 3", Date: new Date("10/4/2012") }
    ];

Works fine in FF. Does anyone see something wrong with the for-loop above? Thanks again for any insights…

Answer 1

Ok, took a lot of fiddling around but found the problem. Pretty dumb ultimately but now I know. Apparently FF has problems when you throw new Date() at it with dashes, but it works with slashes. So my main mistake (which I should have been more specific about in the original post, apologies) was using the format “MM-DD-YYYY” in the name tags of each event element. I changed the name tags of each event element to the format “MM/DD/YYYY”, updated the linking function to reflect this and everything seems to be working perfectly now across all tested browsers (Chrome, IE 9, IE<9, FF).

Thanks for all of your suggestions, definitely helped get me to the final solution.