自定义Flex日历控件

在使用Flex做日程安排的时候需要一个日历功能，在日历中显示日程信息，Flex自带的日历中没有自定义功能，因此自己写了一个日历控件，效果如下:

制作方法：

创建一个Module,在其中放置一个Grid,将其分为7x7个单元格

接口:

事件:

ItemClick 单击事件

参数:

e.result.data 单击时的GridItem对象

e.result.date 单击时的日期信息

DateChange 日期改变事件

参数:

e.result.year 年份

e.result.month 月份,已修正1-12

e.result.data  Grid对象

方法:

setDate(y:int,m:int) 设置当前显示日期

y年份

m月份,已修正1-12

setDayInfo(d:int,text:String)设置日期信息

d日期

text 信息

例子:

    lbl2.text="改变日期:"+y+"年"+m+"月";
    if(m==1) md.setDayInfo(1,"/n<font color='#ff0000'>元旦</font>");
    if(m==5) md.setDayInfo(1,"/n愚人节");
    if(m==6) md.setDayInfo(1,"/n儿童节");
    if(m==7) md.setDayInfo(1,"/n建党节");
    if(m==8) md.setDayInfo(1,"/n建军节");
    if(m==10) md.setDayInfo(1,"/n国庆节"); 

哈哈，下面是源码:

MyDate.MXML

 <?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="304" initialize="init()">
<mx:Style>
 .header{text-align:center}
</mx:Style>
<mx:Metadata>
 //定义事件
 [Event(name="ItemClick",type="mx.rpc.events.ResultEvent")]//单击事件
 [Event(name="DateChange",type="mx.rpc.events.ResultEvent")]//年月改变时的事件
</mx:Metadata>
<mx:Script>
 <![CDATA[
  import mx.rpc.events.ResultEvent;  
  import mx.controls.Alert;
  import mx.containers.GridRow;
  import mx.collections.ArrayCollection;
  import mx.utils.ArrayUtil;
  import mx.containers.GridItem;
  private var oldItem:GridItem;
  private var lbls:ArrayCollection;
  private var yy:int;
  private var mm:int;
  private var firstDay:int;
  //初始化
  private function init(){
   lbls=new ArrayCollection();
   for(var i=1;i<dg1.getChildren().length;i++){
    var gr:GridRow=dg1.getChildAt(i) as GridRow;
    for(var j=0;j<gr.getChildren().length;j++){
     var gi:GridItem=gr.getChildAt(j) as GridItem;
     gi.addEventListener(MouseEvent.CLICK,clickitem);
     var lbl:Label=gi.getChildAt(0) as Label;
     lbls.addItem(lbl);
    }
   }
   var d:Date=new Date();
   yy=d.getFullYear();
   mm=d.getMonth();
   changeDate();
  }
  //计算天数
  private function getDays(y:int,m:int):int{
   if(m==1||m==3||m==5||m==7||m==8||m==10||m==12) return 31;
   if(m==4||m==6||m==9||m==11) return 30;
   if(y%4==0 && y%100!=0) return 29;
   if(y%400==0) return 29;
   return 28;
  }
  //更改年月
  public function setDate(y:int,m:int):void{
   yy=y;
   mm=m-1;
   changeDate();
  }
  //设置日期的信息
  public function setDayInfo(d:int,text:String):void{
   (lbls[firstDay+d-1] as Label).htmlText+=text;
  }
  //更新日期
  private function changeDate():void{
   var d:Date=new Date(yy,mm);
   var cd:Date=new Date();
   firstDay=d.getDay();
   var m:int=firstDay+getDays(yy,mm);
   lblYear.text=yy+"年"+(mm+1)+"月";
   for(var i=0;i<firstDay;i++){
    (lbls[i] as Label).text="";
    (lbls[i] as Label).enabled=false;
    ((lbls[i]as Label).parent as GridItem).setStyle("backgroundColor","");    
   }   
   for(var i=firstDay;i<m;i++){    
    (lbls[i]as Label).htmlText=""+(i-firstDay+1);
    (lbls[i]as Label).data=""+(i-firstDay+1);
    (lbls[i]as Label).enabled=true;
    if(i-firstDay+1==cd.getDate()&&mm==cd.getMonth() && yy==cd.getFullYear()){
     ((lbls[i]as Label).parent as GridItem).setStyle("backgroundColor","#889988");
     ((lbls[i]as Label).parent as GridItem).data="haha";     
    } 
    else
    {
     ((lbls[i]as Label).parent as GridItem).setStyle("backgroundColor","");
     ((lbls[i]as Label).parent as GridItem).data="";
    }    
   }
   for(var i=m;i<lbls.length;i++){
    (lbls[i] as Label).text="";
    (lbls[i] as Label).enabled=false;
    ((lbls[i]as Label).parent as GridItem).setStyle("backgroundColor","");
   }
   var o=new Object();
   o.year=yy;
   o.month=mm+1;
   o.data=dg1;
   dispatchEvent(new ResultEvent("DateChange",false,true,o));//激发事件
  }
  private function mout(e:MouseEvent):void{
   var gi:GridItem= e.currentTarget as GridItem;
   if((gi.getChildAt(0) as Label).enabled)
   {
    if(gi.data.toString().length==0)
     gi.setStyle("backgroundColor","");
     else{
     if(gi.data.toString()=="haha"){
      gi.setStyle("backgroundColor","#889988");//backgroundColor="#54D3EE"
     }
     else{
      gi.setStyle("backgroundColor","#54D3EE");//backgroundColor="#54D3EE"
     }
    }
   }
  }
  private function mv(e:MouseEvent):void{
   var gi:GridItem= e.currentTarget as GridItem;
   if((gi.getChildAt(0) as Label).enabled){
    
    if(gi.data.toString().length==0)
     gi.setStyle("backgroundColor","#54D3EE");//backgroundColor="#54D3EE"
    else{
     if(gi.data.toString()=="haha"){
      gi.setStyle("backgroundColor","#77FF88");//backgroundColor="#54D3EE"
     }
     else{
      gi.setStyle("backgroundColor","#54D3EE");//backgroundColor="#54D3EE"
     }
    }
   }   
  } 
  private function clickitem(e:MouseEvent):void{
   var gi:GridItem= e.currentTarget as GridItem;
   if(oldItem!=null){
    oldItem.data="";
    oldItem.setStyle("backgroundColor","");    
   }
   gi.data="hehe";
   gi.setStyle("backgroundColor","#54D3EE");
   oldItem=gi;
   
   var d:int=int((gi.getChildAt(0) as Label).data);
   var dd:Date=new Date(yy,mm,d);
   var o=new Object;
   o.data=gi;//封装对象
   o.date=yy+"-"+(mm+1)+"-"+d;//封装日期
   dispatchEvent(new ResultEvent("ItemClick",false,true,o));
  } 
  
  private function nextMonth(n:int):void{
   mm+=n;
   if(mm==12){
    yy++;
    mm=0;
   }
   if(mm==-1)
   {
    yy--;
    mm=11;
   }
   changeDate();
  } 
  
  private function nextYear(n:int):void{
   yy+=n;
   changeDate();
  }
  private function currentDate():void{
   var d:Date=new Date();
   yy=d.getFullYear();
   mm=d.getMonth();
   changeDate();
  }
 ]]>
</mx:Script>
 <mx:Canvas backgroundColor="#CEE2E8" left="0" right="0" top="0" height="28" borderStyle="solid" borderThickness="1">
 <mx:Button right="3" top="3" height="20" click="nextYear(1);" width="20." icon="@Embed(source='images/nn.gif')"/> 
 <mx:Button top="3" left="25" width="20" click="nextMonth(-1);"  height="20" icon="@Embed(source='images/p.gif')"/>
 <mx:Button top="3" left="3" width="20" click="nextYear(-1);" height="20" icon="@Embed(source='images/pp.gif')"/>
 <mx:Button top="3" height="20" right="25" click="nextMonth(1);" width="20" icon="@Embed(source='images/n.gif')"/>
 <mx:Label id="lblYear" text="2010年8月 " textAlign="center" right="100" left="100" fontSize="14" top="2"/>
 <mx:Button icon="@Embed(source='images/now.gif')" click="currentDate()" height="20" width="20" top="3" horizontalCenter="60"/>
 </mx:Canvas>
 <mx:Grid id="dg1" verticalGap="2" horizontalGap="2" top="30" bottom="3" left="3" right="3">
  <mx:GridRow width="100%" height="20"  fontWeight="bold" color="#CB0538">
   <mx:GridItem width="100%" height="100%"  borderStyle="solid" borderColor="#0125FD" borderThickness="0">
    <mx:Label text="日"  width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="一" width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="二" width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="三" width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="四" width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="五" width="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD">
    <mx:Label text="六" width="100%" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%" borderStyle="none" borderThickness="1">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label id="l1" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l2" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l3" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l4" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l5" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label id="l6" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l7"  text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label id="l8"  text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem  id="l9" width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem  id="l10" width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem  id="l11" width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l12" text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l13"  text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label  id="l14"  text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow width="100%" height="100%">
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)" >
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="100%" textAlign="center"/>
   </mx:GridItem>
   <mx:GridItem width="100%" height="100%" borderStyle="solid" borderThickness="0" borderColor="#0125FD" mouseMove="mv(event)" mouseOut="mout(event)">
    <mx:Label text="Label" width="100%" height="30" textAlign="center"/>
   </mx:GridItem>
  </mx:GridRow>  
  </mx:Grid>
</mx:Module>
 

Test.MXML代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application fontSize="12" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.haha.*" xmlns:ns2="*">
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.containers.GridItem;
  import mx.rpc.events.ResultEvent;
  private function itemClick(e:ResultEvent):void{
   var gi:GridItem=e.result.data;
   var date:String=e.result.date;
   lbl1.text="选择日期:"+date;   
  }
  private function dateChange(e:ResultEvent):void{
   if(e.result!=null&&lbl2!=null){
    var y:int=e.result.year;
    var m:int=e.result.month;
    lbl2.text="改变日期:"+y+"年"+m+"月";
    if(m==1) md.setDayInfo(1,"/n<font color='#ff0000'>元旦</font>");
    if(m==5) md.setDayInfo(1,"/n愚人节");
    if(m==6) md.setDayInfo(1,"/n儿童节");
    if(m==7) md.setDayInfo(1,"/n建党节");
    if(m==8) md.setDayInfo(1,"/n建军节");
    if(m==10) md.setDayInfo(1,"/n国庆节");    
   }
  }
  private function setDate():void{
   var y:int=int(txty.text);
   var m:int=int(txtm.text);
   md.setDate(y,m);
  }
 ]]>
</mx:Script>
 <ns2:MyDate id="md" x="74" y="151" backgroundColor="#F8F4F4" fontSize="12"
  ItemClick="itemClick(event)"
  DateChange="dateChange(event)">
 </ns2:MyDate>
 <ns1:MyDateChoose x="588" y="68"/>
 <mx:Label x="74" y="56" text="" id="lbl1"/>
 <mx:Label x="74" y="91" text="" id="lbl2"/>
 <mx:TextInput x="74" y="119" width="70" id="txty"/>
 <mx:Label x="152" y="121" text="年"/>
 <mx:TextInput x="182" y="119" width="70" id="txtm"/>
 <mx:Label x="260" y="121" text="月"/>
 <mx:Button x="290" y="119" label="设置" click="setDate()"/>
</mx:Application>
 

希望对大家有用!