3
Lift 및 CalendarMonthView 위젯을 사용하여 약속 시스템을 구축하려고합니다.Lift/Scala에서 CalendarItem 항목의 배경을 변경하십시오.
CalendarMonthView는 Lift와 함께 작동하지만 은 캘린더에 표시된 일부 CalendarItem 스타일을 변경할 수 없다는 문제가 있습니다.
API 문서에 따르면 캘린더를 작성할 때 다음 코드를 사용하여 특정 CalendarItem의 CSS 클래스를 변경합니다.
class MySnippet {
def test (xhtml: NodeSeq) = {
val c = Calendar.getInstance
val meta = MonthViewMeta (Calendar.SUNDAY, Locale.getDefault)
c.set (2010, 0, 0)
bind ("cal", xhtml,
"widget" -> CalendarMonthView (c, meta, cals, Empty,
Empty, Empty))
}
def cals = {
val c1 = Calendar.getInstance
val c2 = Calendar.getInstance
c1.set (2010, 0, 5, 10, 0)
c2.set (2010, 0, 6, 10, 0)
val calitem1 = CalendarItem ("4", c1, CalendarType.MEETING).
optional (
_.subject ("Red Item"),
_.description ("Background should be read")
)
val calitem2 = CalendarItem ("5", c2, CalendarType.MEETING).
optional (
_.subject ("Green Item"),
_.description ("Background should be green"),
_.baseCSSClassName ("greenItem")
)
List (calitem1, calitem2)
}
}
그리고 출력 HTML에서, calitem2는 "greenItem"에 설정 "cssClass" 속성을 가지고 있음을 확인했습니다.
var calendars = {
"items": [{"id": "4", "start": 20, "end": 48,
"weekDay": "3", "startTime": "10:0",
"subject": "Red Item", "month": 0, "dayOfMonth": 5,
"description": "Background should be read"},
{"id": "5", "start": 20, "end": 48, "weekDay": "4",
"startTime": "10:0", "subject": "Green Item", "month": 0,
"dayOfMonth": 6, "description": "Background should be green",
"cssClass": "greenItem"}]
};
그리고 나는 또한 CalendarMonthView 와 함께 원래있는 style.css을 무시하고 WEB-INF/클래스/toserv/달력/monthview 아래에 넣어.
나는 그것을 탐색하여 다음 "greenItem"CSS 클래스를 추가 한 수정 된 버전인지 확인했습니다. 내 일정 페이지를 탐색 할 때
.greenItem {
margin: 1px;
}
.greenItem a {
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
background-color: #00FF00;
display: block;
}
.greenItem a:hover {
text-decoration: none;
background-color: #ff6655;
display: block;
}
.greenItemHead {
margin: 1px;
}
.greenItemHead a {
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
background-color: #00FF00;
display: block;
}
.greenItemHead a:hover {
text-decoration: none;
background-color: #ff6655;
display: block;
}
.greenItemBody {
margin: 1px;
}
.greenItemBody a {
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
background-color: #00FF00;
display: block;
}
.greenItemBody a:hover {
text-decoration: none;
background-color: #ff6655;
display: block;
}
는하지만, 두 번째 CalendarItem는 빨간색 배경에 여전히 있는 CSS 클래스가 작동하지 않는 것 같다.
JavaScript 및 JQuery에 익숙하지 않아 뭔가 놓치기 만합니까?