Customizing the Flex DateChooser control

The following example shows how you can customize the DateChooser control in Flex by using an embedded font, customizing the header styles, week day names, week day name styles, and colors by setting various styles and properties.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/21/customizing-the-flex-datechooser-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
            unicode-range:
                U+0030-U+0039, /* 0-9 */
                U+0041-U+0051, /* Uppercase A-Z */
                U+0052-U+007A, /* Lowercase a-z */
                U+002F-U+002F; /* slash (/) */
        }

        DateChooser {
            cornerRadius: 0; /* pixels */
            headerColors: black, black;
            borderColor: black;
            themeColor: black;
            fontFamily: Base02Embedded;
            todayColor: red;
            todayStyleName: myTodayStyleName;
            headerStyleName: myHeaderStyleName;
            weekDayStyleName: myWeekDayStyleName;
            dropShadowEnabled: true;
        }

        .myTodayStyleName {
            color: white;
        }

        .myWeekDayStyleName {
            fontWeight: normal;
        }

        .myHeaderStyleName {
            color: red;
            fontSize: 16;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.formatters.DateBase;

            private function dateChooser_init():void {
                dateChooser.dayNames = DateBase.dayNamesShort;
            }
        ]]>
    </mx:Script>

    <mx:DateChooser id="dateChooser"
            initialize="dateChooser_init();" />

</mx:Application>

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

For an example of using embedded fonts with the Flex DateField control, see “Embedding fonts for the Flex DateField control”.