jQuery Datepicker beforeShowDay çalışmıyor

Question

Basit bir takvim uygulamak için jQuery UI Datepicker kullanıyorum. İçinde özel bir işlevi görebilmek için önce geri arama yapmam gerekiyor, böylece farklı günlerdeki günleri (çalışma günleri, resmi tatil günleri ve benzeri) vurgulayabiliyorum, ancak döndüğüm sınıflar uygulanmıyor gibi görünüyor. Bu çalışır ve renderCalendarCallback denir ve şöyle

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

: İşte datepicker başlatmak için koddur Bu yöntemde

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

, calendarDays günlerde bazı bilgileri ile günler adında bir dizi var Vurmalıyım. Bilgin olsun, burada ben kullanıyorum örnek calendarDays var:

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

Benim sayfayı çalıştırdığınızda, ben karşılık gelen iki uyarıları Ben IFS akıp giden bana olsun, böylece döndürülen değer olmalıdır:

bir olayda

return [true, 'nonworkingday']; 

ve uyarıları tarayıcıda haşhaş görebilirsiniz çünkü bu doğrulanır diğer yandan

return [true, 'modifiedworkingday']; 

(.

Ancak, takvimdeki her iki gün de bir varsayılan ile aynı stile sahip. Benim CSS şöyle görünür:

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

:

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

herhangi bir yardım olacaksa, takvim ve gün 8 hem masa bölünmeler ve bunun gibi 12 bakışla tarafından oluşturulan tabloyu incelemek için google chrome geliştirici araçlarını kullandı

Neden ders boş? Geri dönüşten döndüğüm sınıfın olmaması mı gerekiyor? Neyi yanlış yapıyorum?

Teşekkürler! Benim için

Answer 1

Çalışır: http://jsfiddle.net/ryleyb/b6V3W/1/

Yani farklı yaptık anlamaya. @Point'in önerdiğini ve calendarDays nesnesini yeniden düzenledim, böylece her dizi konumu ayın bir gününü temsil eder. Böylelikle, her gün onun içinden geçmek zorunda kalmak yerine, geri dönüşünüzdeki dizi konumuna düz bir şekilde atlarsınız.

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

DÜZENLEME: Eğer arka plan geçersiz kılmak istiyorsanız yorumlara dayanarak, CSS gibi görünmelidir:

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