Hi all,

After spending some time with the woodstock calendar component i finally found a good workaround (at least for me).

First of all you should know that the performance degradation of the Woodstock calendar could easily be traced back to the integrated datepicker. To give it a try just disable the datepicker by invalidating it's used HTML-Template (for example in the prerender() function of the page):

mycal.getDatePicker().setHtmlTemplate("NONE");

The rendered page loads faster now but you'll miss the fool-proved datepicker widget. As user are usually fools ;-) you can/should add another (quicker/better) javascript based datepicker to the component. I decided to use the 'Javascript Advanced Calendar Script (JACS) by Anthony Garrett' (s. http://www.garrett.nildram.co.uk/calendar/jacs.htm ). See the attached picture for the results..

Read on to get know howto exchange the datepicker of the woodstock calendar component:

1) Get a javascript based HTML-Calendar widget script that fits your needs (We'll use jacs.js in this example) and include it in your page by using the JPS script tag:

<webuijsf:script id="js_jacs" url="/my/path/under/web_pages/jacs.js"/>

2) In NB's Project tab goto the Libraries folder and open the "Web UI Default Theme - webui-jsf-suntheme.jar" - Library Make a copy of "com/sun/webui/jsf/suntheme4_2-080320/templates/calendarField.html" and store it as somewhere in your packages as for e.g. "myCalField.html".

3) In your copy ("myCalField.html") modify the content of the TD-tag for the calendar in the following way:

<!-- Table cell for the calendar --> <td class="myCalPopup" onclick="JACS.show(document.getElementById(this.parentNode.parentNode.parentNode.id+'_field'),event);"> <div dojoAttachPoint="linkContainer" valign="top"> <div dojoAttachPoint="calendarContainer"/> </div> </td>

(Note that the getElementById() call passes the corresponding input-Control to the show() function! ) 4) Add following code to the prerender() function of the page (mycal is the calendar component):

mycal.setHtmlTemplate("/my/path/in/package/myCalField.html"); mycal.getDatePicker().setHtmlTemplate("NONE");

5) Add the following class to your stylesheet that is included in your page:

.myCalPopup{ background-image: url(<<APPNAME>>/theme/com/sun/webui/jsf/suntheme4_2-080320/images/other/combinedImage.png ); background-position: 0px -810px; width: 20px; height: 20px; position:relative; left: 10px; }

NOTE: You have to exchange <<APPNAME>> with the context path of your app (e.g. "/myApp" - see Project settings->run). This CSS-Class is used to display the image which is used for invoking the datepicker.

6) Build, run, enjoy. If it doesn't work doublecheck that your browsercache is cleared. It'a good idea to use a tool like the "webdeveloper toolbar" for problem investigation (and disabling of caching).

Fortunately we use an derivation of the original calendar class (to archive a better, homegrown converter) in our pages. For this reason we didn't need to modify the prerender() on each page. We just added the two lines (from step four above) to the constructor method of our Calendar class and we were done.

Enjoy and thank Anthony Garrett for this great datepicker!

Andreas

Nick Beare wrote: