FLEX - Grid 컴퍼넌트로 그린 달력.

FLEX 위젯을 만드는데
사이즈가 너무커서 임으로 달력을 그려서 넣을 일이 생겨서 하나 만들었다.
그리드 로우 추가부분이 이상해서 검토필요.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="130" initialize="init()">
<mx:Script>
    <![CDATA[
        import mx.states.SetStyle;
            [Bindable]
            private var _txtYearMonth:String=null;        //달력에 보이는 year-month 설정
           
            private var _calDate:Date = new Date();        //현재 달력의 날짜 (년, 월) 참조 가능
            private var _startDay:uint;                    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
            private var _endDate:uint;                    //해당 달의 마지막 날짜       

            private const PREV:String = "move.previous"; //달력 진행 방향
            private const NEXT:String = "move.next";         
            private const CELL_WIDTH:uint = 30;        //요일 셀 설정
            private const CELL_HEIGHT:uint = 14;   
           
            private const CELLTYPE_MASK:uint            = 0x1111;    //요일 타입 설정 & | 연산자를 통해 마스킹 처리
            private const CELLTYPE_BLANK:uint            = 0x0000;    //0
            private const CELLTYPE_SAT:uint                = 0x0100;    //256
            private const CELLTYPE_SUN:uint                = 0x1000;    //4096
           
            private function init():void{
                drawCalendar(_calDate);               
            }               
            /**
             * 달력을 이동한다
             * @param direction 이동방향 (PREV, NEXT)
             * */
            private function moveMonth(direction:String):void{

                switch(direction){
                    case PREV:
                        _calDate.setMonth(_calDate.getMonth()-1);
                    break;
                    case NEXT:
                        _calDate.setMonth(_calDate.getMonth()+1);
                    break;
                }
                //월을 받아서 달력그리기                               
                drawCalendar(_calDate);
            }       
            /**
             * 달력 년월을 설정한다.
             * @txtYearMonth txtYearMonth 날짜 ex) 2009.03
             * */
            public function set txtYearMonth(txtYearMonth:String):void{
                this._txtYearMonth = txtYearMonth;
            }
           
            /**
             * 그리드 내부 값 삭제하기
             * */
            private function initGrid():void
            {
                while(true)
                {
                    //첫번째 자식은 요일표시 제목이기때문에 삭제 안함
                    if(viewGrid.numChildren > 1)
                    {
                        viewGrid.removeChildAt(viewGrid.numChildren-1);
                    }
                    else break;
                }
               
                //타이틀 변경 : 변경된 년월을 그려준다.
                drawTitle();
            }
            /**
             * 변경된 년월을 그려준다.
             * */
            private function drawTitle():void{
                _txtYearMonth = _calDate.fullYear + "." + (_calDate.month+1) ;
            }   
            /**
             * GridRow 생성 : 1주일 - GridRow 스타일 설정
             * */
            private function getGridRow():GridRow
            {
                var item:GridRow = new GridRow();
               
                item.percentWidth = 100;
                item.height = 14;
               
                return item;
            }                   
            /**
             * GridItem 생성 : 1일 - GridItem 내부 Label 스타일 설정
             * @param row 행 0부터 시작함.
             * @param col 열 0부터 시작함.
             * */
            private function getGridItem(row:uint, col:uint):GridItem
            {
                var itemType:uint ;                    //아이템 타입
                var startCnt:uint = _startDay;
                var inputCnt:uint = row + (col*7);
               
                var calYear:uint = _calDate.fullYear;
                var calMonth:uint = _calDate.month;
                var calDate:uint = inputCnt - startCnt + 1;
                var calDay:uint = _calDate.day;
               
                //입력 범위 밖에 있는 값들 ...
                if(startCnt > inputCnt || inputCnt > (_startDay+_endDate-1) ) {
                    itemType = CELLTYPE_BLANK;
                    calDate = 0;    // 범위 밖(오류) : 날짜를 0으로 강제 셋팅 해준다.
                }
                else{
                    itemType = getCellType(new Date(calYear,calMonth,calDate));    //row는 요일과 동일
                }
               
//                trace("itemType : "+itemType);
               
                //itemType 에 따른 Grid
                var gridItem:GridItem = drawGridItem(itemType,calDate);
                return gridItem;   
            }       
            /**
             * 요일에 대하여 셀의 타입을 반환한다.
             * @date 확인하고자 하는 날짜
             * */
            private function getCellType(date:Date):uint
            {
                var yy:uint = date.fullYear;
                var mm:uint = date.month+1;    //월은 0 부터 시작하므로 +1 처리
                var dd:uint = date.date;
                var day:uint = date.day;    //0 : sun, 1 : mon ... , 6 : sat
               
                var cellType:uint = CELLTYPE_BLANK;
                if(day==0) cellType+= CELLTYPE_SUN;        //요일 정보 추가하기
                if(day==6) cellType+= CELLTYPE_SAT;
               
                return cellType;
            }   
                                /**
             * 그리드 아이템 내부에 들어가는 내용을 그려준다.
             * @param type 그리드 타입
             * @param date 날짜 (0 : 범위 밖 날짜)
             * */
            private function drawGridItem(type:uint, date:uint):GridItem{
                var gridItem:GridItem = new GridItem();
                gridItem.width = CELL_WIDTH; 
                gridItem.height = CELL_HEIGHT;
                gridItem.percentHeight = 100;
                gridItem.percentWidth = 100;
                gridItem.setStyle("textAlign","center");
                gridItem.setStyle("fontWeight","bold");
               
               
                //레이블 설정
                var lbDate:Label = new Label();
                if(date==0) lbDate.text = "";
                else lbDate.text = String(date);

                if((type & CELLTYPE_SAT)== CELLTYPE_SAT){                //날짜 - 토요일
                    //lbDate.SetStyle("color", "blue");
                }
                if((type & CELLTYPE_SUN)== CELLTYPE_SUN){                //날짜 - 일요일
                    //lbDate.SetStyle("color", "red");
                }
               
                //그리드안에 LAbel 삽입
                gridItem.addChild(lbDate);
               
                return gridItem;
            }
            /**
             * 달력을 그려준다.
             * @param date 달력을 그리고자 하는 년월           
             * */
            private function drawCalendar(date:Date):void{
                var tmpDate1:Date = new Date(date.fullYear,date.month,1);
                var tmpDate2:Date = new Date(date.fullYear,date.month+1,1);
                tmpDate2.setDate(tmpDate2.getDate()-1);
               
                _startDay = tmpDate1.getDay();    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
                _endDate = tmpDate2.getDate();    //해당 달의 마지막 날짜
               
                //그리드 초기화 : 그리드 내부에 존재하는 모든 아이템을 제거한다.
                initGrid();

                //내부 값 삽입
                for(var i:uint=0;i<6;i++){    //6주를 그려 줄 수 있도록 구성한다. ex) (4)x7 + (1)x1 + (1)x2 = 6주
                    var tmpGridRow:GridRow = getGridRow();
                    for(var j:uint=0;j<7;j++){    //1주일은 7일 임
                        var tmpGridItem:GridItem = getGridItem(j,i);
                        tmpGridRow.addChild(tmpGridItem);
                    }
                    viewGrid.addChild(tmpGridRow);
                }
               
            }           
    ]]>
</mx:Script>
    <mx:HBox x="0" y="0" width="100%" horizontalAlign="center" height="20">
        <mx:Button label="&lt;" click="moveMonth(PREV)" width="22" height="20" icon="@Embed(source='../assets/button/LEFT_ARROW.png')" buttonMode="true" id="PrevBtn"
            toolTip="Prev Month"/>
        <mx:Text text="{_txtYearMonth}" fontSize="12" textAlign="center" id="YearMonth" height="20"/>
        <mx:Button label="&gt;" click="moveMonth(NEXT)" width="22" height="20" icon="@Embed(source='../assets/button/RIGHT_ARROW.png')" buttonMode="true" id="NextBtn"
            toolTip="Next Month"/>
    </mx:HBox>   
    <mx:Canvas x="0" y="20" width="100%" height="109" fontFamily="Arial" fontSize="10" fontWeight="normal">
        <mx:Grid width="150" height="109" horizontalGap="1" horizontalAlign="right" verticalGap="1" verticalAlign="middle"  id="viewGrid" verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:GridRow width="100%" height="100%">
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#FF0713" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="M" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="W" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="F" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#0118F8" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </mx:Canvas>

   
</mx:Canvas>