How to make a Flex DateChooser transparent

A couple of weeks ago, we were skinning an Air Application for one of our clients. One detail,was to make a DateChooser transparent. We tried and tried and could fix the transparency so we had to give in.

The strange thing is that if you use the standard backgroundAlpha style and set it to 0, you still get a semi-transparent background.

After attending Adobe MAX in Milan, we tried some more tricks and finally we created a calendar that is transparent all the way.

1. First we created a new class that extends the DateChooser class.
2. Second, we create a new style setting so that it is easy to change the opacity of the background.
3. Third, we override the createChildren to use the new opacity for the background.

There might be a mush simpler way of achieving this (there should be at least), but we havent found it yet. If some of you know how to make it easier, let me know.

Here is a demo and here is the complete source: Link

And here is the extended class code:

// DateChooser extended class to make transparency possible
// Author: Camilo Tapia, Bronson ID
// Date: 2008-12-04
// Copyright 2008
package com.bronson
{
    import mx.controls.DateChooser;

    // create a new style setting
    [Style(name="calendarContentBackgroundAlpha", type="Number", inherit="no")]

    public class ExtendedDateChooser extends DateChooser
    {

        public function ExtendedDateChooser()
        {
            super();
        }

        // override the createChildren function to make the changes
        override protected function createChildren():void
        {
            super.createChildren();
            super.getChildAt(1).alpha = getStyle("calendarContentBackgroundAlpha");
            super.getChildAt(0).alpha = getStyle("calendarContentBackgroundAlpha");
        }

    }
}