Question

I have a JSF-page containing only a PrimeFaces Calendar component, backed by a view scoped bean.

<p:calendar value="#{calendarBean.today}" mode="inline" showOtherMonths="true" pages="1" binding="#{calendarBean.model}" />

The generated HTML for this component contains a table that I’d like to adjust. More specifically, I want to put icons dynamically into this calendar by adding some HTML-code under the td-tags of the targeted days.

From the CalendarBean I can fetch from some service a list of objects representing days “with icons”. I need this list to decide which days to alter in the table. I tried to get the HTML DOM in my backing bean, but I don’t understand how. The UIComponent tree (that I get via the binding property) only contains the JSF-components, not the generated HTML. I start to doubt if this is even the way to approach the problem.

My google-skills seem to fall short here. Can anybody help me?

Answer 1

The concrete functional requirement is not entirely clear, so it’s hard to propose the right way for this, but there are in general varous ways to alter the look’n’feel of the JSF/PrimeFaces-generated HTML.

1. Use custom CSS. Icons could simply be set as CSS background images.

2. Use custom JS. JS has instant access to the entire HTML DOM tree.

3. Use custom JSF renderer. Extend the PrimeFaces CalendarRenderer class and override the encodeXxx() method(s) accordingly.

The backing bean is supposed to be the controller between the view (the XHTML file) and the model (the javabean entity class holding the data which is to be presented to the enduser or to capture the submitted data from enduser). It isn’t supposed to manipulate the HTML.