How to set the time increments on the calendar component?


Wondering if there is a way to set the time increments on the calendar component, for example, 15 min, 30 min, 1 hour, etc. Also, is there a way to make the caption of the event readable on the calendar when the duration of the event is short?

The issue I’m having is that users want to schedule short phone calls and can’t read the event caption text when the meeting is short.


  1. Could you clarify what do you mean by “time increments”? Do you mean this time bar on the left?

  2. You can either create your own client-side realization of a calendar event or try to change its visual appearance using CSS.

Yes, I was referring to the time bar on the left. I’d like it to show 15 min increments. Is this a CSS change? If so, which class?

Unfortunately, to change TimeBar you also need to create your own client-side implementation. It’s the default implementation: com.vaadin.client.ui.calendar.schedule.WeekGrid.Timebar. You can take a look at it.

Perhaps tweaking the cell high in the parent class WeekGrid would accomplish what I need without altering the TimeBar? Do you have an example of the best way to get access to the methods of the Vaadin classes in Cuba? Does it involve unwrapping? I’m not familiar with that part of the API

Take a look at this sample app. It demonstrates how to use custom event classes.