jQuery Datepicker beforeShowDay ne fonctionne pas

Question

J'utilise jQuery UI Datepicker pour implémenter un calendrier simple. Dans celui-ci j'ai le rappel beforeShowDay à une fonction personnalisée afin que je puisse mettre en évidence différents types de jours (jours ouvrables, jours fériés et autres), cependant, les classes que je retourne ne semblent pas être appliquées. Voici le code pour initialiser le datepicker:

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

Cela fonctionne et renderCalendarCallback est appelé et ressemble à ceci:

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, '']; 
} 

Dans cette méthode, calendarDays a un tableau appelé jours avec quelques informations sur les jours Je dois mettre en évidence. À titre d'information, voici les exemples calendarDays j'utilise:

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

Quand je lance la page, je reçois les deux alertes me disant correspondant j'ai couru à travers les ifs, la valeur renvoyée doit être:

return [true, 'nonworkingday']; 

dans un cas et

return [true, 'modifiedworkingday']; 

de l'autre (ce qui est vérifié parce que je peux voir les alertes apparaître dans le navigateur.

Cependant, les deux jours dans le calendrier ont exactement le même style qu'un calendrier par défaut. Mon CSS ressemble à ceci:

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

Si c'est une aide, je outils de développement de Google Chrome pour inspecter la table générée par le calendrier et les deux divisions de table de jours 8 et 12 se présentent comme suit:

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

Pourquoi la classe est-elle vide? Ne devrait-il pas avoir la classe que j'ai renvoyée du rappel? Qu'est-ce que je fais mal?

Merci!

Answer 1

Works pour moi: http://jsfiddle.net/ryleyb/b6V3W/1/

donc savoir ce que vous avez fait différemment. J'ai fait comme @Pointy suggéré et réarrangé votre objet calendarDays de sorte que chaque position de tableau représente un jour du mois. De cette façon, vous passez directement à la position du tableau dans votre rappel au lieu d'avoir à passer par tous les jours.

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: Sur la base des commentaires, si vous voulez remplacer l'arrière-plan, le CSS devrait ressembler à ceci:

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