Changeset 4043 for ssme/trunk/flex/Calendar/src/Calendar.mxml

Timestamp:

08/15/10 14:10:00 (21 months ago)

Author:

mszopinski

Message:

calendar, one-dat/week display + refresh

Files:

• ssme/trunk/flex/Calendar/src/Calendar.mxml (modified) (16 diffs)

ssme/trunk/flex/Calendar/src/Calendar.mxml

@@ -29 +29 @@
         backgroundGradientAlphas="[0, 0]"
         loadUserEntity="true"
-        currentState="day"
+        currentState="{ DAY_STATE }"
+        stateChanged="onStateChanged(event);"
         >
 
     <!-- ========================================================= -->
-    <components:states>
+    <components:states>    
         <mx:State name="day" >
-            <mx:SetProperty target="{ canvas_2 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_3 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_4 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_5 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_6 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_7 }" name="visible" value="false" />
-            <mx:SetProperty target="{ canvas_2 }" name="includeInLayout" value="false" />
-            <mx:SetProperty target="{ canvas_3 }" name="includeInLayout" value="false" />
-            <mx:SetProperty target="{ canvas_4 }" name="includeInLayout" value="false" />
-            <mx:SetProperty target="{ canvas_5 }" name="includeInLayout" value="false" />
-            <mx:SetProperty target="{ canvas_6 }" name="includeInLayout" value="false" />
-            <mx:SetProperty target="{ canvas_7 }" name="includeInLayout" value="false" />            
         </mx:State>
         <mx:State name="week" >
-            <mx:SetProperty target="{ canvas_2 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_3 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_4 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_5 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_6 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_7 }" name="visible" value="true" />
-            <mx:SetProperty target="{ canvas_2 }" name="includeInLayout" value="true" />
-            <mx:SetProperty target="{ canvas_3 }" name="includeInLayout" value="true" />
-            <mx:SetProperty target="{ canvas_4 }" name="includeInLayout" value="true" />
-            <mx:SetProperty target="{ canvas_5 }" name="includeInLayout" value="true" />
-            <mx:SetProperty target="{ canvas_6 }" name="includeInLayout" value="true" />
-            <mx:SetProperty target="{ canvas_7 }" name="includeInLayout" value="true" /> 
         </mx:State>
-        <mx:State name="month" />
+        <mx:State name="month" >
+        </mx:State>            
     </components:states>
     <!-- ========================================================= -->
@@ -83 +61 @@
                 <mx:Resize target="{ monthBox }" heightTo="{ canvasContainer.height }" />
             </mx:Parallel>
-        </mx:Transition>         
+        </mx:Transition>
     </components:transitions>
-    <!-- ========================================================= -->    
-    <mx:Fade id="fadeIn" duration="500" alphaFrom="0" alphaTo="1.0" />
-    <mx:Fade id="fadeOut" duration="500" alphaFrom="1.0" alphaTo="0" />
     <!-- ========================================================= -->
-
-
+    <mx:Fade id="fadeIn" duration="300" alphaFrom="0" alphaTo="1.0" />
+    <mx:Fade id="fadeOut" duration="300" alphaFrom="1.0" alphaTo="0" />
+    <!-- ========================================================= -->
+    <mx:DateFormatter id="dateFormatter" formatString="DD.MM.YYYY" />
+    <!-- ========================================================= -->
     <mx:Style source="assets/calendar.css" />
+    <!-- ========================================================= -->
 
     <components:HeaderlessPanel
@@ -106 +85 @@
 
             <mx:DateField id="chosenDate"
+                    formatString="DD-MM-YYYY"
                     firstDayOfWeek="1"
-                    dayNames="[ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]"
-                    formatString="DD-MM-YYYY"
+                    dayNames="[ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]"                    
                     yearNavigationEnabled="true"
                     editable="false"
                     />
+
+            <mx:Button id="calendar_reload"
+                        styleName="calendarReload"
+                        click="{ loadEvents(event); }"
+                        width="20" height="20"
+                        useHandCursor="true"
+                        mouseChildren="false"
+                        enabled="true"/>
+
+            <mx:Label id="errorLabel" color="red" text="" width="100%"/>
 
             <mx:ToggleButtonBar id="state" itemClick="{ toggleClicked(event); }">
@@ -121 +110 @@
                     </mx:Array>
                 </mx:dataProvider>
-            </mx:ToggleButtonBar>
-
-            <mx:Button id="calendar_reload"
-                        styleName="calendarReload"
-                        click="{ loadEvents(event); }"
-                        width="20" height="20"
-                        useHandCursor="true"
-                        mouseChildren="false"
-                        enabled="true"/>
-
-            <mx:Label id="errorLabel" color="red" text="" />
+            </mx:ToggleButtonBar>            
 
         </mx:HBox>
@@ -140 +119 @@
             
             <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }" paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
-
-                <components:VerticalLabelsList id="v_list"
-                        verticalMargin="10" showHourLabels="true"
-                        width="50" height="100%" minHeight="400"
-                        outerBorderThickness="1"
-                        innerBorderThicknesses="2"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        visible="true" includeInLayout="true"
-                        cornerRadius="0">
-                </components:VerticalLabelsList>
-
-                <components:DayCanvas id="canvas_1"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        visible="true" includeInLayout="true"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_2"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_3"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_4"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_5"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_6"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
-                        cornerRadius="0">
-                </components:DayCanvas>
-
-                <components:DayCanvas id="canvas_7"
-                        verticalMargin="10" leftHorizontalMargin="5"
-                        width="100%" height="100%" minHeight="400"
-                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
-                        innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
-                        backgroundColor="0xffffff" backgroundAlpha="0"
-                        rows="[ 24, 96 ]" columns="[ 1 ]"
-                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"                        
-                        cornerRadius="0">
-                </components:DayCanvas>
-
+                <mx:VBox id="dayBox0" width="50" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas0" width="100%" textAlign="center" />
+                    <components:VerticalLabelsList id="v_list"
+                            verticalMargin="10" showHourLabels="true"
+                            width="50" height="100%" minHeight="400"
+                            outerBorderThickness="1"
+                            innerBorderThicknesses="2"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            visible="true" includeInLayout="true"
+                            cornerRadius="0">
+                    </components:VerticalLabelsList>
+                </mx:VBox>
+                <mx:VBox id="dayBox1" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas1" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_1"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            visible="true" includeInLayout="true"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox2" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas2" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_2"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox3" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas3" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_3"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox4" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas4" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_4"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox5" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas5" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_5"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox6" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas6" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_6"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
+                <mx:VBox id="dayBox7" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelCanvas7" width="100%" textAlign="center" />
+                    <components:DayCanvas id="canvas_7"
+                            verticalMargin="10" leftHorizontalMargin="5"
+                            width="100%" height="100%" minHeight="400"
+                            outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1"
+                            innerBorderColors="[ 0x000000, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3 ]" innerBorderThicknesses="[ 2, 1 ]"
+                            backgroundColor="0xffffff" backgroundAlpha="0"
+                            rows="[ 24, 96 ]" columns="[ 1 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            cornerRadius="0">
+                    </components:DayCanvas>
+                </mx:VBox>
             </mx:HBox>
 
@@ -280 +274 @@
             calendarConnector.addEventListener(BasicQueuedConnector.EVENT_FAULT, onCalendarGetResponse);
 
-            if(!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)                
+            if(!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)
 
             currentState = "day";
-            theDayCanvas = canvas_1;
+            dayCanvasLabels = [ labelCanvas1, labelCanvas2, labelCanvas3, labelCanvas4, labelCanvas5, labelCanvas6, labelCanvas7 ];
             dayCanvas = [ canvas_1, canvas_2, canvas_3, canvas_4, canvas_5, canvas_6, canvas_7 ];
+            dayCanvasBoxes = [ dayBox1, dayBox2, dayBox3, dayBox4, dayBox5, dayBox6, dayBox7 ];
         }
 
@@ -290 +285 @@
         private const WEEK:int = 1;
         private const MONTH:int = 2;
-
         private function toggleClicked(event:Event):void {
-            switch( state.selectedIndex ){
-                case DAY:   currentState="day"; break;
-                case WEEK:  currentState="week"; break;
-                case MONTH: currentState="month"; break;
-            }
-            loadEvents(event);
-        }        
+//            setDates();
+//            switch( state.selectedIndex ){
+//                case DAY:   currentState = DAY_STATE; break;
+//                case WEEK:  currentState = WEEK_STATE; break;
+//                case MONTH: currentState = MONTH_STATE; break;
+//            }
+            loadEvents(event);         
+        }
 
         private function prepareCalendarList(event:Event):void {
@@ -307 +302 @@
             calendarsList.sort( sortCalendars );
             calendarsList.push( { uuid:null, name: "All" } );
-            calendarCombo.selectedIndex = -1;                   
+            calendarCombo.selectedIndex = -1;
         }
         private function sortCalendars(a:Object, b:Object):int {
             return ( a.name < b.name ) ? -1 : (( a.name > b.name ) ? 1 : 0 );
         }
+        private function setDates():void {
+            currentDay = chosenDate.selectedDate;
+            weekBeginDay = (new DateUtil( currentDay )).weekBegin( 1 ).date;
+            monthBeginDay = (new DateUtil( currentDay )).monthBegin().date;
+            dayOfTheWeek = (currentDay.getDay() - weekBeginDay.getDay() + 7 ) % 7;
+            Logger.debug( "currentDay:["+currentDay+"] weekBeginDay:"+weekBeginDay+" monthBeginDay:"+monthBeginDay+" dayOfTheWeek:"+dayOfTheWeek
+                    +" ("+currentDay.getDay()+":"+weekBeginDay.getDay()+")" );
+        }        
 
         private const EVENTS_RECURSION:int = 1;
@@ -319 +322 @@
                     && chosenDate.selectedDate          // date chosen
                     && state.selectedIndex>=0){         // state chosen
+
+                setDates();
 
                 var date:Date = chosenDate.selectedDate;   // get chosen date
@@ -326 +331 @@
                             begin = DateUtil.dayBegin(date).timestamp;
                             end = DateUtil.dayEnd(date).timestamp;
-                            break;
+                            currentState = DAY_STATE;
+                            onDayStateEnter();
+
+                            // reset previous display
+                            showDayEvents( true );
+                            break;                        
                         }
                     case WEEK: {
                             begin = DateUtil.weekBegin(1, date).timestamp;
                             end = DateUtil.weekEnd(1, date).timestamp;
+                            currentState = WEEK_STATE;
+                            onWeekStateEnter();
+                        
+                            // reset previous display
+                            showWeekEvents( true );                        
                             break;
                         }
@@ -336 +351 @@
                             begin = DateUtil.monthBegin(date).timestamp;
                             end = DateUtil.monthEnd(date).timestamp;
-                            break;                        
+                            currentState = MONTH_STATE;                        
+                            break;
                         }
-                
+
                 }
-                
+
                 ModalSpinner.instance.showSpinner("Loading events for calendar '"+(calendarCombo.selectedItem.name)+"'...", 0x269926, panel, 0.2);
                 errorLabel.text = "";
@@ -348 +364 @@
                     calendarConnector.getCalendarRange( calendarCombo.selectedItem.uuid, begin, end, params );
                 } else {
-                    params[Params.DATA_RECURSION] = EVENTS_RECURSION;                    
+                    params[Params.DATA_RECURSION] = EVENTS_RECURSION;
                     calendarConnector.getCalendarAll( begin, end, params );
                 }
-            }
+            }           
         }
 
         private var calendarEntity:CalendarEntity;
-        private var currentDay:Date, weekBeginDay:Date, monthBeginDay:Date, dayOfTheWeek:int = 0; 
+        [Bindable]
+        private var currentDay:Date;
+        [Bindable]
+        private var weekBeginDay:Date;
+        [Bindable]
+        private var monthBeginDay:Date;
+        [Bindable]
+        private var dayOfTheWeek:int = 0;
+        [Bindable]
+        [ArrayElementType("DayCanvas")]        
+        private var dayCanvas:Array;
+        [Bindable]
+        [ArrayElementType("Label")]        
+        private var dayCanvasLabels:Array;
+        [ArrayElementType("VBox")]
+        private var dayCanvasBoxes:Array;                
         private function onCalendarGetResponse(event:Event):void {
             var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
@@ -363 +394 @@
                 if (result.resultType == ConnectorResult.SUCCESS) {
                     Logger.debug( result.lastResult as String, LoggingComponentsEnum.CAL );
-                    calendarEntity = (new CalendarEntity()).parseJSONString( result.lastResult as String, EVENTS_RECURSION );
-                    currentDay = chosenDate.selectedDate;
-                    weekBeginDay = (new DateUtil( currentDay )).weekBegin( 0 ).date;
-                    monthBeginDay = (new DateUtil( currentDay )).monthBegin().date;
-                    dayOfTheWeek = currentDay.getDay() - weekBeginDay.getDay();
+                    calendarEntity = (new CalendarEntity()).parseJSONString( result.lastResult as String, EVENTS_RECURSION );                 
                     switch( state.selectedIndex ){  // determine time range
                         case DAY: {
                                 showDayEvents();
+                                //currentState = DAY_STATE;
                                 break;
                             }
                         case WEEK: {
                                 showWeekEvents();
+                                //currentState = WEEK_STATE;
                                 break;
                             }
 //                        case MONTH: {
 //                                showMonthEvents();
+//                                currentState = MONTH_STATE;
 //                                break;
 //                       }
-                    }
+                    }                
                 }
                 // error
@@ -397 +427 @@
         }
 
-        private var theDayCanvas:DayCanvas;
-        private var dayCanvas:Array;
-        private function showDayEvents():void {
-            canvas_1.currentDay = currentDay;
-            canvas_1.dataProvider = calendarEntity.timeFramesEntitites;
-            //dayCanvas[ dayOfTheWeek ].currentDay = currentDay;
-            //dayCanvas[ dayOfTheWeek ].dataProvider = calendarEntity.timeFramesEntitites;
-        }
-
-        private function showWeekEvents():void {
-
-            // create data structure
-            var dataProviders:Array = [  ], i:int, timeFrame:TimeFrameEntity;
-            for(i=0; i<7; i++)  dataProviders.push( new HashArray() );
-
-            // divide events among days            
-            for each( timeFrame in calendarEntity.timeFramesEntitites ){
-                if( timeFrame.from.getDay() == timeFrame.to.getDay() ){
-                    // starts and ends in the same day
-                    dataProviders[ timeFrame.from.getDay() ].put( timeFrame.UUID, timeFrame );    
-                } else {
-                    // split over some days so add it to all of them
-                    for(i=timeFrame.from.getDay(); i<=timeFrame.to.getDay();i++){
-                        dataProviders[ i ].put( timeFrame.UUID, timeFrame );          
-                    }                    
+        private function showDayEvents(reset:Boolean = false):void {
+            dayCanvas[ dayOfTheWeek ].currentDay = (reset) ? new Date(-1) : currentDay;
+            dayCanvas[ dayOfTheWeek ].dataProvider = (reset) ? new HashArray() : calendarEntity.timeFramesEntitites;
+            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);            
+            dayCanvasLabels[ dayOfTheWeek ].text = (reset) ? "" : dateFormatter.format( currentDay );
+        }
+
+        private function showWeekEvents(reset:Boolean = false):void {
+
+            if(!reset){
+                // create data structure
+                var dataProviders:Array = [  ], i:int, timeFrame:TimeFrameEntity;
+                for(i=0; i<7; i++)  dataProviders.push( new HashArray() );
+
+                // divide events among days
+                var fromDay:int, toDay:int;
+                for each( timeFrame in calendarEntity.timeFramesEntitites ){
+                    fromDay = (timeFrame.from.getDay() + 6)%7;
+                    toDay = (timeFrame.to.getDay() + 6)%7;
+                    if( fromDay == toDay ){
+                        // starts and ends in the same day
+                        dataProviders[ fromDay ].put( timeFrame.UUID, timeFrame );
+                    } else {
+                        // splitted over more than one days, so add it to all of them
+                        for(i=fromDay; i<=toDay;i++){
+                            dataProviders[ i ].put( timeFrame.UUID, timeFrame );
+                        }
+                    }
                 }
             }
@@ -428 +461 @@
             var weekBegin:DateUtil = new DateUtil( weekBeginDay );
             for(i=0; i<7; i++){
-                (dayCanvas[ i ] as DayCanvas).currentDay = weekBegin.date;
-                (dayCanvas[ i ] as DayCanvas).dataProvider = dataProviders[ i ];
+                dayCanvas[ i ].currentDay = (reset) ? new Date(-1) : weekBegin.date;
+                dayCanvas[ i ].dataProvider = (reset) ? new HashArray() : dataProviders[ i ];
+                dayCanvas[ i ].setStyle("backgroundAlpha", 0);
+                dayCanvasLabels[ i ].text = (reset) ? "" : dateFormatter.format( weekBegin.date );
                 weekBegin.add( DateProperty.DATE, 1 );
             }
-        }        
+            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);
+
+        }
 
         private function onTimeFrameGetResponse(event:Event):void {
@@ -442 +479 @@
 
 
+        //-----------------------------------------------------
+        // states layout management
+        private const DAY_STATE:String = "day";
+        private const WEEK_STATE:String = "week";
+        private const MONTH_STATE:String = "month";
+        private function onDayStateEnter():void {
+            var i:int;
+            for(i=0; i<7; i++){
+                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = (i == dayOfTheWeek);
+            }
+        }
+        private function onWeekStateEnter():void {
+            var i:int;
+            for(i=0; i<7; i++){
+                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = true;         
+            }
+        }        
+        private function onStateChanged(event:Event):void {
+
+//            if(currentState == DAY_STATE){
+//
+//            } else if(currentState == WEEK_STATE){
+//
+//            } else if(currentState == MONTH_STATE){
+//
+//            }
+        }
+        //-----------------------------------------------------