Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/20/setting-the-first-day-of-the-week-in-a-flex-datefield-controls-calendar/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            private function dateField_labelFunc(item:Date):String {
                return dateFormatter.format(item);
            }

            private function slider_change(evt:SliderEvent):void {
                dateField.firstDayOfWeek = evt.value;
                dateField.open();
            }

            private function slider_dataTipFunc(value:Number):String {
                return DateBase.dayNamesShort[value];
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY"/>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="firstDayOfWeek:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="6"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        dataTipFormatFunction="slider_dataTipFunc"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            labelFunction="dateField_labelFunc"
            firstDayOfWeek="{Days.MONDAY}" />

</mx:Application>

View Days.as

package {
    public class Days {
        public static const SUNDAY:uint = 0;
        public static const MONDAY:uint = 1;
        public static const TUESDAY:uint = 2;
        public static const WEDNESDAY:uint = 3;
        public static const THURSDAY:uint = 4;
        public static const FRIDAY:uint = 5;
        public static const SATURDAY:uint = 6;

        public function Days() {
        }
    }
}

View source is enabled in the following example.

For other examples of setting the firstDayOfWeek property (mainly for the DateChooser control), see “Setting the DateChooser control’s dayNames property and firstDayOfWeek property” and “Changing the calendar layout in the DateChooser component using the firstDayOfWeek parameter”.

 

The one interesting thing to note in this example though, is even though you can change the firstDayOfWeek property to control the day first of the week that the calendar starts on, the dayNames array should always start with Sunday.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-daynames-property-and-firstdayofweek-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

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

            [Bindable]
            private var dayNamesDefaultArr:Array;

            [Bindable]
            private var dayNamesShortArr:Array = DateBase.dayNamesShort;

            [Bindable]
            private var dayNamesLongArr:Array = DateBase.dayNamesLong;

            private function init():void {
                dayNamesDefaultArr = dateChooser.dayNames;
            }

            private function slider_dataTipFormatFunc(item:Object):String {
                return dateChooser.dayNames[slider.value];
            }
        ]]>
    </mx:Script>

    <mx:Array id="dayNamesArr"></mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="dayNames:" />
        <mx:ComboBox id="comboBox"
                change="dateChooser.dayNames = comboBox.selectedItem.data">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="default" data="{dayNamesDefaultArr}" />
                    <mx:Object label="short" data="{dayNamesShortArr}" />
                    <mx:Object label="long" data="{dayNamesLongArr}" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="100%" />

        <mx:Label text="firstDayOfWeek:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="6"
                liveDragging="true"
                snapInterval="1"
                dataTipFormatFunction="slider_dataTipFormatFunc" />
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser" firstDayOfWeek="{slider.value}" />

    <mx:Label text="{dateChooser.dayNames.join(', ')}" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function doLabel(item:Date):String {
                return dateFormatter.format(item);
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY"/>

    <mx:DateField todayColor="red" labelFunction="doLabel" firstDayOfWeek="{Days.MONDAY}" />

</mx:Application>

Days.as

// ActionScript file
package {
    public class Days {
        public static const SUNDAY:uint = 0;
        public static const MONDAY:uint = 1;
        public static const TUESDAY:uint = 2;
        public static const WEDNESDAY:uint = 3;
        public static const THURSDAY:uint = 4;
        public static const FRIDAY:uint = 5;
        public static const SATURDAY:uint = 6;
    }
}

View source enabled in the following example

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private var dayNames:Array = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

            private function getDayName(item:Number):String {
                return dayNames[item];
            }
        ]]>
    </mx:Script>

    <mx:DateChooser todayColor="red" firstDayOfWeek="{slider.value}"/>

    <mx:VBox>
        <mx:Label text="First day of week:" />
        <mx:HSlider id="slider" minimum="0" maximum="6" liveDragging="true" snapInterval="1" dataTipFormatFunction="getDayName" />
    </mx:VBox>

</mx:Application>

View source enabled in the following example