Datepicker 변경 날짜 선택 색상 CSS

Question

동적으로 날짜를 설정하는 날짜 선택 도구가 있습니다. 선택할 수있는 유일한 날짜는 모두 일요일로만 설정됩니다. 내 색상 패턴은 매 3 일마다 설정됩니다. 선택할 수없는 날짜는 음소거 된 빨간색이고 선택 가능한 날짜는 밝은 빨간색입니다. - 선택 가능한 날짜를 다른 것과 같이 음소거해야합니다. 선택 셀

CSS는 다음과 같습니다 unelectable 셀 class ui-datepicker-week-end shiftColor_C ui-datepicker-current-day

CSS는 다음과 같습니다 class ui-datepicker-unselectable ui-state-disabled red_day_off

내가 설치가 : 복사 작업의 http://jsfiddle.net/jeffbarclay/hnjv3L8e/1/!

CODE :이 접근하는

var array = ["8/19/2014","11/19/2014","08/25/2014"] 

function noKelly(pick) { 
    var kelly = 4; 
    var dow = pick.getDay(); 
    if(dow==kelly) return [false,'']; 
    return [true,'']; 
} 

function noWeekEnds(pick) { 
var dow = pick.getDay(); 
if (dow > 5 || dow < 1) return [false, '']; 
return [true, '']; 
} 

function onlySunday(pick) { 
var dow = pick.getDay(); 
if (dow > 0) return [false, '']; 
return [true, '']; 
} 

function myAssignedLeave(pick) { 
    var string = $.datepicker.formatDate('m/d/yy', pick); 
    return [ array.indexOf(string) == -1 ] 
} 

function unavailable(pick) { 
var utcPick = new Date(pick.getUTCFullYear(), pick.getUTCMonth(), pick.getUTCDate(), 0, 0, 0); 
//-- converts your pick to utc time 
var utcStart = new Date(2014, 0, 0).getTime(); //gets utc time 
var day = Math.round((utcPick - utcStart)/86400); 
var nwe = noWeekEnds(pick); 
var nkd = noKelly(pick); 
var assLeave = myAssignedLeave(pick); 
var osun = onlySunday(pick); 
var Rnd1 = (true) && osun[0]; // First Round full weeks 

var myShift = "B"; 

var Ashift = (day%3===0) && nkd[0] && assLeave[0]; // A Shift 
var Bshift = (day%3===1) && nkd[0] && assLeave[0]; // B Shift 
var Cshift = (day%3===2) && nkd[0] && assLeave[0]; // C Shift 
var Dshift = (true) && nwe[0] && assLeave[0]; // D Shift 

var Shift = ""; 
var ShiftColor = ""; 
var ShiftColorDayOff = "false"; 
var DO_ShiftColor = ""; 

if(myShift=="A") (Shift = Ashift) && (ShiftColor = "shiftColor_A"); 
if(myShift=="B") (Shift = Bshift) && (ShiftColor = "shiftColor_B"); 
if(myShift=="C") (Shift = Cshift) && (ShiftColor = "shiftColor_C"); 
if(myShift=="D") (Shift = Dshift) && (ShiftColor = "shiftColor_D"); 


//var shift = (true) && osun[0]; 
Shift = Rnd1; 

if((day%3===1) && (osun[0] === false)) return [ false, 'green_day_off', 'unavailable' ]; 

return [Shift, ShiftColor, "Unavailable"]; 
} 

$(document).ready(function() { 
$("#datepicker").datepicker({ 
    beforeShowDay: unavailable 
}); 

$('#datepicker').attr('readonly', true); 
}); 

Answer 1

발견 두 가지 방법 : 스타일에서 0.35로 선택 셀의 불투명도

1) 변화

.ui-datepicker-calendar .shiftColor_C a { 
    color: white; 
    background: red; 
    border-color: black; 
    padding:3px; 
    opacity: .35; 
} 

2) 선택할 수없는 셀의 불투명도를 .99 스타일로 증가시킵니다.

.ui-datepicker .ui-state-disabled { 
    opacity: .99; 
} 

두 가지 방법 모두 일관된 모양을 제공합니다.

실시 예 : SO에 http://jsfiddle.net/jeffbarclay/hnjv3L8e/5/

추천 링크 : multiDatesPicker: how to disable clicking without changing date button color?