Setting font weight on a Flex DateChooser control

The following example shows how you can set the fontWeight style on a Flex DateChooser control to change whether each day in the calendar appears as normal or bold font.

Full code after the jump.

View MXML

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

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

        .myWeekDayStyleName {
            color: haloOrange;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:HBox id="box">
        <mx:VBox>
            <mx:Label text="fontWeight = bold" />
            <mx:DateChooser fontWeight="bold"
                    showToday="false" />
        </mx:VBox>
        <mx:VBox>
            <mx:Label text="fontWeight = normal" />
            <mx:DateChooser fontWeight="normal"
                    showToday="false" />
        </mx:VBox>
        <mx:VBox>
            <mx:Label text="custom styles" />
            <mx:DateChooser color="haloGreen"
                    showToday="false"
                    headerStyleName="myHeaderStyleName"
                    weekDayStyleName="myWeekDayStyleName" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

If you want to set the font weight for the calendar, header, and week days using CSS, you can use the following snippet:

<mx:Style>
    DateChooser {
        fontWeight: normal;
        headerStyleName: normalWeight;
        weekDayStyleName: normalWeight;
    }

    .normalWeight {
        fontWeight: normal;
    }
</mx:Style>

<mx:DateChooser />

Tagged as: fontWeight, headerStyleName, weekDayStyleName