ui.calendar.js

简单博客功能实现

// JScript 文件
X2.Style.Calendar={
	base:'X2Calendar'
	,wrap:'wrap'
	,title:'title'
	,mark:'mark'
	,today:'today'
	,toolbar1:'toolbar1'
	,toolbar2:'toolbar2'
	,toolbar3:'toolbar3'
	,toolbar4:'toolbar4'
	,toolbar5:'toolbar5'
	,notThisMonth:'notThisMonth'
	,listStyle:X2.Style.List
}

X2.UI.Calendar=Class.create();
X2.UI.Calendar.prototype={
	initialize:function(style,markedDate,year,month,date){
		var today;
		if(year)today=new Date(year,month,date);
		else today=new Date();
		this.style=style || X2.Style.Calendar;
		this.year=this.currentYear=today.getFullYear();
		this.month=this.currentMonth=today.getMonth();
		this.date=today.getDate();
		this.day=today.getDay();
		this.box=$se('div');
		this.main=new X2.UI.List(this.style.listStyle);
		this.box.appendChild(this.main.box);
		this.markedDate=markedDate || [];
		this.allowMark=!!markedDate;
		
		Element.addClassName(this.box,this.style.base);
		this.construct();
	}
	,construct:function(){
		this.main.clear();
		var self=this;
		var arr=[];

		arr.push(['<<',function(){
		    if(self.onyearchange && self.onyearchange(self.currentYear-1)===false)return;
			self.currentYear--;
			self.construct();
		},'','','','','',this.style.toolbar1,0,'上一年']);
		arr.push(['<',function(){
		    if(self.onmonthchange && self.onmonthchange(self.currentMonth-1)===false)return;
			if(self.currentMonth==0){
				self.currentYear--;
				self.currentMonth=12;
			}
			self.currentMonth--;
			self.construct();
			
		},'','','','','',this.style.toolbar2,0,'上一月']);
		
		//产生年月选择器
		arr.push([this.currentYear+'年'+(this.currentMonth+1)+'月','','','','','','',this.style.toolbar3,1]);
		
		arr.push(['>',function(){
		    if(self.onmonthchange && self.onmonthchange(self.currentMonth+1)===false)return;
			if(self.currentMonth==11){
				self.currentYear++;
			}
			self.currentMonth++;
			self.currentMonth%=12;
			self.construct();
		},'','','','','',this.style.toolbar4,0,'下一月']);
		arr.push(['>>',function(){
		    if(self.onyearchange && self.onyearchange(self.currentYear+1)===false)return;
			self.currentYear++;
			self.construct();
		},'','','','','',this.style.toolbar5,0,'下一年']);
		
		
		arr.push(['日','','','','','','',this.style.title,1]);
		arr.push(['一','','','','','','',this.style.title,1]);
		arr.push(['二','','','','','','',this.style.title,1]);
		arr.push(['三','','','','','','',this.style.title,1]);
		arr.push(['四','','','','','','',this.style.title,1]);
		arr.push(['五','','','','','','',this.style.title,1]);
		arr.push(['六','','','','','','',this.style.title,1]);

		var date=new Date(this.currentYear,this.currentMonth,1);
		var startDay=date.getDay();
		
		for(var i=0;i<startDay;i++){
			arr.push(['','','','','','','',this.style.notThisMonth,1]);
		}
		
		for(var i=1;i<=this.getMonthDay(this.currentYear,this.currentMonth);i++){
			if(!this.allowMark){
				arr.push([i,function(s){
					self.onchange([self.currentYear,self.currentMonth+1,s.value].join('-'));
				}]);
				startDay++;
				startDay%=7;
				continue;
			}
			if(this.markedDate.include([this.currentYear,this.currentMonth+1,i].join('-'))){
				arr.push([i,function(s){
					self.onchange([self.currentYear,self.currentMonth+1,s.value].join('-'));
				}]);
				arr.last()[7]=arr.last()[7]||''+' '+this.style.mark;
			}else{
				arr.push([i,'','','','','','','',1]);
			}
			
			//设置当天的标记
			if(this.year==this.currentYear && this.month==this.currentMonth && i==this.date){
				arr.last()[7]+=' '+this.style.today;
				arr.last()[9]='今天';
			}
			
			startDay++;
			startDay%=7;
		}
		
		for(var i=startDay;i<7 && startDay>0;i++){
			arr.push(['','','','','','','',this.style.notThisMonth,1]);
		}

		this.main.bindData(arr);

	}
	,setMark:function(date){
		this.markedDate=date;
	}
	,setYear:function(year){
		this.currentYear=year;
		this.construct();
	}
	,setMonth:function(month){
		this.currentMonth=month;
		this.construct();
	}
	,onchange:Prototype.emptyFunction
	,onyearchange:Prototype.emptyFunction
	,onmonthchange:Prototype.emptyFunction
	,getMonthDay:function(year,month){
		var arr=[31,28,31,30,31,30,31,31,30,31,30,31];
		if((year%4==0 && year%100>0) || year%400==0)arr[1]=29;
		return arr[month];
	}

}