3

私はLiftとCalendarMonthViewウィジェットを使用して予約システムを構築しようとしています。

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の「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;
}

しかし、カレンダーページを閲覧すると、2番目のCalendarItemはまだ赤い背景のままで、CSSクラスが機能していないようです。

私はJavaScriptとJQueryに精通していないので、何かが恋しいですか？

4

1 に答える 1

1

OK、カレンダーウィジェットモジュールのバグが原因であることがわかりました。

そこで、チケットを提出し、トラッカーにパッチを作成しました。

https://www.assembla.com/spaces/liftweb/tickets/563

于 2010-06-24T06:16:00.500 に答える