How to format CalendarEvent's

By default, calendar event are displayed like this



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.


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 :

Also Vaadin team changed the event display in their ticket-app demo.
May be it could give you some tips :
(but it still does not change basic text display)


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


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.



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