我正在尝试使用 Lift 和 CalendarMonthView 小部件来构建一个 预约系统。
CalendarMonthView 与 Lift 配合得很好,但我有一个问题 无法更改显示在 日历。
根据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 有一个“cssClass” 属性设置为“greenItem”。
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/classes/toserv/calendars/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,所以我错过了什么吗?
最佳答案
关于jquery - 在 Lift/Scala 中更改某些 CalendarItem 元素的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3107081/