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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree