Customizing the DatePicker

[Juanito]

I was wondering if anyone knows if there's a way to specify what class to use for a specific date range. We use a calendar to allow users to switch pay periods within their timesheet and would like to have alternating colors for each period.

YUI's calendar allows you to add custom renderers for a day or for a date range. Is there a similar concept in Ext-js? I would love to be able to stick to Ext-js and not have to add extra YUI files to my project.

I will start looking into finding which event fires before each month/day is rendered and customizing the css in that cell.

Thanks,

Juan

[jsakalos]

Good question. I also want to know.

[Sunflower]

Hi,

I was also trying to find a solution for rendering dates separately, depending on some condition and i bumped into the same problem: by using ext datepicker you are not able to use different date rendering.

I would love to see the YUI Calendar functionalities included into Ext.DatePicker, at least the rendering related ones.

Or maybe somebody has an idea how to do this?

Thanks,
Iris

[Juanito]

The best thing you can do is subscribe to the render event and modify the markup after a month has been rendered. I am still using YUI's calendar because I need to show a number of months at a time.

--Juan

[Sunflower]

Thanks Juan!

Honestly, in this moment it seems easier to use YUI calendar than Ext DatePicker, for rendering. I hope that the Ext team will try to introduce the missing features soon enough.

Iris

[Juanito]

Just beware that if you create too many renderers (in YUI) , it will slow down you page a lot. Even if you create a renderer for a date range, YUI creates a separate renderer for each day.

--Juan

[Sunflower]

Thanks for the tip, I will try to compromise: using yui instead of ext, with the possibility of slowing down the application, but only until ext won't implement the features. Than I will probably rewrite everything.

Iris