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>