How to style a SmartGwt calendar - css

Question

How can I modify the behavior pf a smart GWT Calendar, so that when a day cell is clicked, it remains selected (highlighted)
I know I have to somehow modify the the css for the day cell inside a dayBodyClickedHandler
but I can't figure out how. Does any one have an example of this?

Answer 1

The corresponding css probably is .calendarCellSelected {}
You can set the name of a CSS style: calendar.setSelectedCellStyle(selectedCellStyle)
You can look up the standard CSS for Calendar in your theme. For example in 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;
}