How to format CalendarEvent's

Vaadin 6 / 7 / 8
1

By default, calendar event are displayed like this

hh:mm


caption

I would like to use my own formatting. How should I proceed? My real problem is the line break actually, I would like to remove it.

2

Hello,

Not sure it would be easy to do. It seems to be “hardcoded” client side (see DateCellDayEvent object).
There were some changes to allow better css control : https://dev.vaadin.com/ticket/12460

Also Vaadin team changed the event display in their ticket-app demo.
May be it could give you some tips :

https://github.com/vaadin/dashboard-demo/blob/master/src/main/java/com/vaadin/demo/dashboard/view/schedule/ScheduleView.java
(but it still does not change basic text display)

Regards

3

Hi Sebastien

Thank you for your hints. As you mention they are not real solutions to my problem because it is hardcoded in Vaadin’s code.
So far I see 3 solutions:

  • use JQuery (smth like $(‘.v-calendar-event-caption br’).remove()), quite ugly
  • change Vaadin’s code myself, quite ugly too
  • ask Vaadin’s team to do it to provide more flexibility in the display of calendar events

I will go for the 3rd option unless anyone has a bright idea. I will keep the community posted.

Thanks again

4

Hello,

If you get some answers, please keep us posted : calendar component does not seems to be under active work. Would be interesting to see it evolves.

Regards

5

Hi

I am not a CSS expert but taking some time on the web lead me to this solution: add

.v-calendar-event .v-calendar-event-caption > span,
.v-calendar-event .v-calendar-event-caption > br {
display: none;
}

in you scss or css to remove the time and semicolon from the calendar events.
Thanks for the interest