DateField - highlight specific dates?


I want to display an InlineDateField adnd highlight a couple of days (eg yellow). The datefield will be readonly.
How could I achieve this? In the css I only find the option to alter the currently selected day, but how can I color multiple specific days of a month?

Unfortunately, there is no API to do that, either on server or client side :frowning: You would have to extend the datefield widget to be able to do this.

Is there any guide (could not find any) that helps in how to extend custom vaadin widgets?

You might want to read to Book of Vaadin, chapter 15 onwards. The idea is that you create a class extending DateField, one extending PopupDateFieldConnector, and one extending VPopupCalendar. You need to add the API you want into DateField and the connector. Then you need to extend VCalendarPanel and add the logic for setting separate style names for the dates you want colored.

Now that I took a look at it, it seems that this particular feature seems impossible to do without forking the DateField code. The method that builds the panel is buildCalendarBody() in VCalendarPanel, and unfortunately it is private. So, instead of extending the classes, you need to copy all relevant code instead. Be warned, that the DateField is quite a complex component, so don’t change things any more than you need to.

Hm, readying the docs and your comment, I get the impression that this a lots of work with unpredicable outcome.

Maybe it’s then better to execute some JavaScript code directly in vaadin to manipulate the dom tree, eg find a specific date tag and apply a css class for coloring the background accordindly.

That would most likely be easier, yes.

There is also the Calendar component, which is more versatile in its display options but might be unnecessary complex for your needs: