Vaadin日曆事件選中樣式更改點擊

Question

我試圖在單擊它時更改Vaadin日曆組件中事件的樣式。這是我做的：

eventCalendar.setHandler((CalendarComponentEvents.EventClick event) -> { 
    /* some code to iterate the container and remove selected style from other events*/ 
    ((BasicEvent) event.getCalendarEvent()).setStyleName("event-selected"); 
}); 

但沒有任何反應。該類不添加。

Answer 1

幾小時後，兩個觀察化險爲夷：

首先，設置對事件本身的樣式名不觸發刷新，所以我們只需要添加eventCalendar.markAsDirty()的處理方法。

其次，setStyleName不會將具有該名稱的CSS類添加到日曆事件元素。它增加了與.v-calendar-event-前綴的類（例如，在我的例子，將成爲.v-calendar-event-event-selected

所以，解決辦法是進行以下更新的UI類：

eventCalendar.setHandler((CalendarComponentEvents.EventClick event) -> { 
    /* some code to iterate the container and remove selected style from other events*/ 
    ((BasicEvent) event.getCalendarEvent()).setStyleName("selected"); 
    eventCalendar.markAsDirty(); 
}); 

，並添加以下類styles.scss，在Vaadin主題的根名稱內：

.v-calendar-event-selected{ 
     /*however I wanted the selected event to look like*/ 
    }