If you are reading this then you probably have come into contact with the richfaces calendar performance problem.

By design, the richfaces calendar will create a calendar every place where you put a rich:calendar tag. This isn’t a problem when you have one or two, but lets say you have a rich:dataTable where one of the columns contains a rich:calendar tag. After about 20 or so rows, the page becomes incredibly slow and almost unusable.

I ran into this exact problem a few months back and just got around to posting the solution.

First take a look at . Following the post fixes the performance issues, however caused other problems.

Problem 1:
If you are using a converter for the date, make sure you only put it on the ‘fake’ calendar inputText. Doing so will allow the controller to accept it as a Date object. Also set the converter to the default pattern that is set in the rich:calendar tag. This will make sure that the converter can convert it correctly.

Problem 2:
In addition to the above converter problem, another problem occured. Make sure to use the s:dateTimeConverter tag. This tag will use the Seam timezone setting, which will be the server timezone unless changed by a user. This is important as I was trying to use the f:dateTimeConverter tag which defaults to GMT. This was causing my dates to be a day off.

Problem 3:
If you are wanting to validate the ‘fake’ calendar value, say it has to be after the current day, via ajax using a a4j:support tag, then you have to make the ‘fake’ calendar’s input box enabled. This poses a problem now because the user can then type in whatever they want. The solution to this issue was to add this.blur(); on the onclick and onkeydown events.

The modified code:

Add

oncollapse="#{rich:component('calendar')}.customInput.onchange();"

to the rich:calendar tag to call the onchange event for the ‘fake’ calendar.

Change

<f:convertDateTime.../>

to

<s:convertDateTime ... pattern="MMM d, yyyy" />

on the ‘fake’ calendar input box, remove the converter from the rich:calendar tag, and make sure the pattern of both the rich:calendar tag and the ‘fake’ calendar input box are the same (the rich:calendar tag uses the above pattern by default).

Add

onkeydown="this.blur();"
onclick="this.blur(); ....."

to the ‘fake’ calendar input box to avoid the issue of the user typing in the input box.