如何風格SmartGWT的日曆

Question

如何修改PF智能GWT日曆的行爲，讓被點擊了一天的細胞時，它仍然選擇（高亮）

我知道我必須以某種方式修改的CSS對於一天內的細胞BouchClickedHandler

但我無法弄清楚如何。有沒有人有這樣的例子？

Answer 1

相應的CSS可能是.calendarCellSelected {}

您可以設置的CSS樣式的名稱：calendar.setSelectedCellStyle(selectedCellStyle)

你可以看一下日曆標準的CSS在你的主題。例如在BlackOps中：

/*============================================================ 
    Calendar 

============================================================*/ 
.calendar, 
.calendarDisabled, 
.calendarWorkday, 
.calendarDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#ffffff; 
} 

.calendarDisabled { 
    background-color:gainsboro;  
} 

.calendarWorkday { 
    background-color:#ffffcc; 
} 

.calendarOver, 
.calendarOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#c0ffc0; 
} 
.calendarCellSelected { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#CCCCCC; 
} 
.labelColumn { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:gainsboro; 
} 
/* ----month---- */ 
/* calMonthDayHeader and Body */ 

.calMonthDayHeader, 
.calMonthDayHeaderDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color: gainsboro; 
} 

.calMonthDayHeaderOver, 
.calMonthDayHeaderOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color: #c0ffc0; 
} 
.calMonthDayBody, 
.calMonthDayBodyDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#ffffff; 
} 
.calMonthDayBodyOver, 
.calMonthDayBodyOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#c0ffc0; 
} 

.calMonthDayBodyDisabled, 
.calMonthDayBodyDisabledOver { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#E6E6E6; 
} 
/* calMonthOtherDayHeader and Body */ 

.calMonthOtherDayHeader, 
.calMonthOtherDayHeaderDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:#444444; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color: #aaaaaa; 
} 
.calMonthOtherDayHeaderOver, 
.calMonthOtherDayHeaderOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:#444444; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color: #c0ffc0; 
} 
.calMonthOtherDayBody, 
.calMonthOtherDayBodyDark, 
.calMonthOtherDayBodyDisabled, 
.calMonthOtherDayBodyDisabledOver { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#E6E6E6; 
} 
.calMonthOtherDayBodyOver, 
.calMonthOtherDayBodyOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:black; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color:#c0ffc0; 
} 
/* calMonthOtherDayBlank */ 

.calMonthOtherDayBlank, 
.calMonthOtherDayBlankDark, 
.calMonthOtherDayBlankOver, 
.calMonthOtherDayBlankOverDark { 
    font-family:Arial,sans-serif; font-size:11px; 
    color:#444444; 
    border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; 
    background-color: #E6E6E6; 
} 

/* calMonthEventLink */ 

a.calMonthEventLink:link {color:blue; text-decoration:none} 
a.calMonthEventLink:visited {color:blue; text-decoration:none} 
a.calMonthEventLink:hover {color:blue; text-decoration:underline} 
a.calMonthEventLink:active {color:blue; text-decoration:none} 

/* ----event window---- */ 

.eventWindow { 
    font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px; 
    background-color:#649ED8; 
    border: 1px solid #004D99; 
} 

.eventWindowHeader { 
    font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px; 
    color:white; 
    background-color:#004D99; 
} 

.eventWindowBody { 
    font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px; 
    color:black; 
    background-color: #649ED8; 
    padding: 3px; 
} 

.eventWindowResizer{ 
    border-top:1px solid white; 
    border-bottom: 1px solid white; 
}