jQuery Datepicker beforeShowDay funktioniert nicht

Question

Ich verwende den jQuery UI Datepicker, um einen einfachen Kalender zu implementieren. Darin habe ich den Callback vorShowDay zu einer benutzerdefinierten Funktion, so dass ich verschiedene Arten von Tagen darauf hervorheben kann (Arbeitstage, Feiertage usw.), jedoch scheinen die Klassen, die ich zurückgebe, nicht angewendet zu werden. Hier ist der Code ist die Datepicker zu initialisieren:

$('#jdatepicker').datepicker(
     { 
      dateFormat: 'dd-mm-yyyy', 
      beforeShowDay: renderCalendarCallback, 
      onChangeMonthYear: onMonthChanged, 
      onSelect: onCalendarSelectedDate 
     } 
    ); 

Dies funktioniert und renderCalendarCallback aufgerufen und sieht wie folgt aus:

function renderCalendarCallback(date) { 
    if (initialLoad) return [true, '']; 
    $.each(
     calendarDays.days, 
     function (intIndex, objValue) { 
      if (objValue.number == date.getDate()) { 
       if (objValue.dayType == NonWorkingDay) { 
        alert('nonworkingday - ' + date.getDate()); 
        return [true, 'nonworkingday']; 
       } 
       else if (objValue.dayType == ModifiedWorkingDay) { 
        alert('modifiedday - ' + date.getDate()); 
        return [true, 'modifiedday']; 
       } 
       else if (objValue.dayType == WorkingDay) { 
        alert('workingday - ' + date.getDate()); 
        return [true, 'workingday']; 
       } 
      } 
    }); 
    //Here for the default days 
    return [true, '']; 
} 

In diesem Verfahren hat calendarDays ein Array mit ein paar Informationen genannt Tagen an den Tagen Ich muss hervorheben. Zu Ihrer Information, hier ist die Probe calendarDays Ich verwende:

{"days":[{"i":2,"dayType":2,"number":8},{"i":4,"dayType":3,"number":12}]} 

Wenn ich die Seite laufen lasse, erhalte ich die entsprechenden beiden Warnungen mir zu sagen, lief ich durch die ifs, so sollte der zurückgegebene Wert sein:

return [true, 'nonworkingday']; 

in einem Fall und

return [true, 'modifiedworkingday']; 

auf dem anderen (dies wird überprüft, weil ich die Warnungen erscheinen im Browser sehen.

012.351.

Allerdings haben beide Tage im Kalender genau den gleichen Stil wie der Standard. Meine CSS sieht wie folgt aus:

.nonworkingday { 
    background-color: #F7BE81 !important; 
} 
.modifiedday { 
    background-color: #F4FA58 !important; 
} 
.workingday { 
    background-color: #ACFA58 !important; 
} 

Wenn es keine Hilfe ist, habe ich Google Chrome-Entwickler-Tools die erzeugte Tabelle durch den Kalender und sowohl den Tabellen Divisionen aus den Tagen 8 und 12 sieht wie folgt zu prüfen:

<td class=" " onclick="DP_jQuery_1290097799897.datepicker._selectDay('#jdatepicker',10,2010, this);return false;"><a class="ui-state-default" href="#">8</a></td> 

Warum ist die Klasse leer? Sollte es nicht die Klasse haben, die ich vom Rückruf zurückgegeben habe? Was mache ich falsch?

Danke!

Answer 1

Werke für mich: http://jsfiddle.net/ryleyb/b6V3W/1/

So herauszufinden, was Sie anders gemacht haben. Ich tat wie @ Pointy vorgeschlagen und neu angeordnet calendarDays Objekt, so dass jede Array-Position einen Tag des Monats darstellt. Auf diese Weise springen Sie in Ihrem Callback direkt zur Array-Position, anstatt sie jeden Tag durchlaufen zu müssen.

var calendarDays = { 
    days: [ 
    undefined, undefined, 
    { 
     "dayType": WorkingDay, 
     "i": 5}, // <-- this is in position 2 in the array, so it represents day 2 
    undefined, undefined, undefined, undefined, 
    { 
     "dayType": NonWorkingDay, 
     "i": 9}, // <-- position 7, 7th of the month 
    { 
     "dayType": ModifiedWorkingDay, 
     "i": 1} // <-- 8, etc 
    ] 
}; 

EDIT: Basierend auf den Kommentaren, wenn Sie den Hintergrund außer Kraft setzen möchten, sollte die CSS wie folgt aussehen:

.nonworkingday { 
    background: none !important; 
    background-color: #F7BE81 !important; 
}