DateChooser with support for backgroundColoring some dates

I got a query recently asking whether it is possible to have the DateChooser highlight certain special dates with a different background color. The query was accompanided by a DateChooser code which achieved this by using the TexField.backgroud and TexField.backgroudColor properties (similar to my other posts for DG row background coloring). But the draw back of the approach was that selection and roll over feedback was not working.

I took a look at DateChooser and CalendarLayout and realized that with the current design/implmentation it was not possible to add the backgroundColor support. The selection and rollOver indicators were lower in z order than date UITextFields.

I modified the CalenderLayout code to have three layers (UIComponents). One for background, second for indicators and third one for the dates. After modifying the addChild* and removeChild calls refer to the appropriate layers, the remaining work was to add "speicalDates" and "specialDatesColor" property and wire them up at appropirate places (commitProperties and updateDisplayList) to achive the following result :

I have randomnly generated the special dates in the above sample to keep the sample live on any day it is viewed!

I have added a alpha value of 0.7 in DateChooserIndicator to make the selection indicator show through the backgroundColor. Feel free to tweak this value to your flavor.

The project source to build the Flex3Ex.swc is here. It contains the modified DateChooser and CalendarLayout classes. I posted the complete Flex project here because Travis pointed out that it is difficult for newbies to understand how to use the component source files. Thanks Travis!

The source for the sample app is here.

The components can be further enhanced to support multiple specialDates (array of array of dates) and multiple specialDatesColors.

Update: I got to implement this. Source is available here.

Update: I have updated the source to support the following:

Now dates can be specified as strings "06/01/2009" (for 1st June 2009) but make sure that it succeeds to pass through Date.parse function and returns a valid Date.

Date ranges can be specified as follows:

{ rangeStart:"06/01/2009", rangeEnd:"06/05/2009" }

Update: There seems to be some problem with library path handling etc due to which a swc is not getting picked up properly in FB. The work around I came up for this is to include the Flex3Ex/src directory in the source path of the project as shown here

Changing row background color in AdvancedDataGrid

Changing the row backgroundColor in AdvancedDataGrid to highlight few rows is easy (though not possible out of the box).

I have used a different approach than overriding the drawRowBackground function used for DG. The drawback of this approach is that the selection feedback gets almost hidden by the background coloring. If the intention is to highlight a search or hightlight a particular values this should not be a serious problem.

The default itemRenderer ADGItemRenderer extends from UITextField (for perforamnce reasons) which doesn't have a backgroundColor style. Hence it is not possible to do it out of the box. But TextField (parent of UITextField) has background and backgroundColor properties which can be set to change the backgroundColor of the TextField.

I have created a new custom itemRenderer ADGItemRendererEx which derives from ADGItemRenderer. I have added a "rowColor" style to this and use this style value to set the TextFields background color.

By providing a styleFunction to ADG we get control to return any styles we want to be set on the itemRenderer. Any logic to determine a particular rows color can go into this function. The return value is a object with style names as properties and style values as proprety-values. For ex:

return { rowColor:0xFF0000, fontWeight:"bold" };

If function logic decides not to change the styles it can return an empty object.

The following sample shows the result. By typing any string in the text box the particular row containing the searched string is highlighted. User can choose to search for either company column or product column.

The source is available here.