自定义Flex日历控件
2010-08-26 09:09
465 查看
在使用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>
希望对大家有用!
***方法：
创建一个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>
希望对大家有用!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Flex自定义日历控件
- Flex自定义组件开发之日周月日期选择日历控件
- flex日历控件的自定义
- Flex “跑马灯”效果（自定义“跑马灯”控件）
- 让FLEX日历控件成中文显示的方法
- 自定义日历控件，可以根据需求定制属于自己的日历
- 自定义javascript日历控件
- 【无私分享】修订版干货！！！一个炫酷的自定义日历控件，摆脱日历时间选择烦恼，纯福利~
- Android 自定义价格日历控件
- Flex 学习笔记 Datagrid中创建自定义ComboBox控件及数字校验
- Flex 自定义日期时间控件
- 向日历控件中添加自定义内容
- Android开发实现自定义日历、日期选择控件效果
- Flex中如何通过设置toolTipField属性在ButtonBar控件中设定自定义tool tip的例子
- Flex textinput, 可以输入自定义的item， 类似wow的输入框控件
- iOS自定义日历控件
- 自定义的日历控件--CKCalendar
- asp.net自定义日历控件，兼容Asp.net ajax
- Android UI-自定义日历控件
- 自定义SWT日历控件及其下拉菜单组件的实现