CODEWITHSUNDEEP
jquery-ui-datepicker
Psykopup
Psykopup

Reputation: 165

jQuery DatePicker calendar not returning correct month

I am soooo close here. I'm hoping a guru can help me with this last piece. I'm populating a jQuery DatePicker calendar with XML from an RSS feed. Upon clicking a highlighted date where there's an event, I'm creating a URL with a query string so I can display all the event for the clicked day. Everything is working... until I change the month by clicking previous or next month. My script will return the correct day, but is only returning the current month. For example, I navigate to May and click the 5th, my URL will be events.htm?month=june&day=5. Any ideas on why it will not return my selected month? Here's my code:

var data = $.ajax({
  url: "news.xml",
  type: "GET",
  dataType: "xml",
  async:false,
  success: function(xml){
     return xml;
  }
} ).responseText;

$(document).ready(function() {

    var events = getSelectedDates();

    $("div.datepicker").datepicker({
        beforeShowDay: function(date) {
            var result = [true, '', null];
            var matching = $.grep(events, function(event) {
                    return event.published.getDate() === date.getDate() && event.published.getMonth() === date.getMonth() && event.published.getFullYear() === date.getFullYear();
            });

            if (matching.length) {
                result = [true, 'highlight', null];
            }
            return result;
        },
        onSelect: function(dateText) {
            var date, selectedDate = new Date(dateText),
                i = 0,
                event = null;

            while (i < events.length && !event) {
                date = events[i].published;

                if (selectedDate.getFullYear() === date.getFullYear() && 
                    selectedDate.getMonth() === date.getMonth() && 
                    selectedDate.getDate() === date.getDate()) {

                    event = events[i];
                }
                i++;
            }
            if (event) {
                var eMonNum = event.published.getMonth();
                var d = new Date();
                var eMonNum = new Array();
                eMonNum[0] = "january";
                eMonNum[1] = "february";
                eMonNum[2] = "march";
                eMonNum[3] = "april";
                eMonNum[4] = "may";
                eMonNum[5] = "june";
                eMonNum[6] = "july";
                eMonNum[7] = "august";
                eMonNum[8] = "september";
                eMonNum[9] = "october";
                eMonNum[10] = "november";
                eMonNum[11] = "december";
                var eMon = eMonNum[d.getMonth()];
                var eDay = event.published.getDate();
                window.location = "events.htm?month="+eMon+"&day="+eDay;
            }
        }
    });
});

function getSelectedDates() {
    return $(data).find('entry').map(function() {
        return {
            title: $('title', this).text(),
            published: new Date($('published', this).text())
        };
    }).get();
}

Upvotes: 0

Views: 369

Answers (1)

Jonathan
Jonathan

Reputation: 986

Found the problem, when you copied this list from a resource, you forgot to replace the variables.

CHANGE (at the end of month list)

var eMon = eMonNum[d.getMonth()];

TO:

var eMon = eMonNum[event.published.getMonth()];

All I did was get rid of the bad variable and reassigned your month variable to the one you used for the day. You can also remove the declaration of the d variable, as you will not need it.

Best of luck!

Upvotes: 1

Related Questions