Setting the first day of the week in a Flex DateField control’s calendar

The following example shows how you can set the firstDayOfWeek property on the Flex DateField control to control whether the pop-up calendar starts on a Sunday (default) or a different day of the week.

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”.

Tagged as: dayNamesShort, firstDayOfWeek