Flex 4 DateChooser

Question

I have an Array of days. I want those days to have a different background-color in the DateChooser component, say red.

How can I do that please?

Answer 1

The DateChooser isn't that easy to customise!

Something close to this will work, though you'll need to tweak it somewhat to suit what you want to do.

public class FancyDateChooser extends DateChooser {
    public var fancyStyleName : String;
    public var dayToMakeFancy : String;

    protected override createChildren() : void {
        super.createChildren();
        var dateGrid : UIComponent = mx_internal::dateGrid;
        for ( var i: int = 0; i < dateGrid.numChidren; i++ ) {
            if ( ( dateGrid.getChildAt( i ) as IUITextField ).text == dayToMakeFancy ) {
                dateGrid.getChildAt( i ).styleName = fancyStyleName;
            }
        }
    }
}

Answer 2

Thanks for Gregor Kiddie's share. I modified Gregor Kiddie's code a bit. Let it can input multiple dates.

public class MyDateChooser extends DateChooser
{
    public var highlightColor : Number = 0xff0000; // sample
    public var highlightDate : Array = ["10","20"]; // sample

    public function MyDateChooser()
    {
        super();
    }

    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        var dateGrid : UIComponent = mx_internal::dateGrid;
        for ( var i: int = 0; i < dateGrid.numChildren; i++ ) {
            if (dateGrid.getChildAt( i ) is IUITextField) {
                var textField:UITextField = dateGrid.getChildAt(i) as UITextField;
                for (var j:int = 0; j<highlightDate.length; j++) {
                    if ( textField.text == highlightDate[j] ) {
                        textField.textColor = highlightColor;
                    }
                }
            }
        }

Answer 3

You have to use disabledRanges and disabledColor. Here is an example on "Flex examples".