Aligning headers in a DateChooser control in Flex

The following example shows how you can align the month name and year in a Flex DateChooser control by setting the textAlign and headerStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/05/aligning-headers-in-a-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".dateChooserHeaderStyles");
                cssObj.setStyle("textAlign", comboBox.selectedItem);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        .dateChooserHeaderStyles {
            fontWeight: bold;
            textAlign: left;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,center,right]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            headerStyleName="dateChooserHeaderStyles" />

</mx:Application>

View source is enabled in the following example.

For an example of aligning the days in a Flex DateChooser control, see “Changing the Flex DateChooser control’s text alignment”.

6 thoughts on “Aligning headers in a DateChooser control in Flex

  1. the page links to the wrong sample swf…
    it displays the swf from “Changing the label text alignment in a FormItem container in Flex” instead!

  2. Joseph / julio,

    Yeah sorry, I noticed that late last night, but was too lazy to rebuild SWFs before bed.

    I’ll get the SWF fixed as soon as I can.

    Peter

    UPDATE: New SWF posted.

  3. The problem I am having is that I have a calendar component that’s 575 in width and I can set the align to center but it only centers the month, the year is still to the right.

  4. Peter,

    One more question while i’m on the calendar component. Is there a way to have multiple colors for certain days or added ranges? Like if I add a certain event for a day or maybe a holiday.

    Thanks by the way for the help.

Comments are closed.