YCalendar - 日历控件

设计思想：《Javascript设计模式》程序编写：YAOHAIXIAO.COM 发表时间：2010 - 02 - 12

程序简介

YCalendar - 日历控件，这个控件是在《Javascript设计模式》一书中第十三章《享元模式》的Web日历代码的基础上修改扩展出来的。基本实现了一个简单的日历控件的功能，setYear()方法显示年历，setMonth()方法显示月历。程序还不很完善，仅供大家学设计模式参考之用。当然你也可以完善这个控件作为开发使用，我以后也会完善它的。

调用方法

第一步：在页面中调用ycalendar.js文件，例如：

第二步：编写调用代码：

YCalendar.setMonth();

程序代码

BtnLastMonth[theMonth] = D.createElement('img');
				BtnLastMonth[theMonth].className = 'ycalendar_lastmonth';
				BtnLastMonth[theMonth].src = 'img/resultset_previous.png';
				BtnLastMonth[theMonth].alt = '上一月';
				
				BtnNextMonth[theMonth] = D.createElement('img');
				BtnNextMonth[theMonth].className = 'ycalendar_nextmonth';
				BtnNextMonth[theMonth].src = 'img/resultset_next.png';
				BtnNextMonth[theMonth].alt = '下一月';

BtnNextYear[theMonth] = D.createElement('img');
				BtnNextYear[theMonth].className = 'ycalendar_nextyear';
				BtnNextYear[theMonth].src = 'img/resultset_last.png';
				BtnNextYear[theMonth].alt = '下一年';
				
				monthContainer.appendChild(BtnLastYear[theMonth]);
				monthContainer.appendChild(BtnLastMonth[theMonth]);
				monthContainer.appendChild(BtnNextMonth[theMonth]);
                monthContainer.appendChild(BtnNextYear[theMonth]);
				
				BtnLastYear[theMonth].onclick = function(index){
					return function(){
						that.lastYear.call(that, index);
					}
				}(theMonth);
				BtnLastMonth[theMonth].onclick = function(index){
					return function(){
						that.lastMonth.call(that, index);
					}
				}(theMonth);
				BtnNextMonth[theMonth].onclick = function(index){
					return function(){
						that.nextMonth.call(that, index);
					}
				}(theMonth);
				BtnNextYear[theMonth].onclick = function(index){
					return function(){
						that.nextYear.call(that, index);
					}
				}(theMonth);
			}
			
			// 创建月份标题
			monthTitle = D.createElement('h4');
			monthTitle.id = 'ycalendar_month' + theMonth;
			monthTitle.innerHTML = '<span id="ycalendar_currentYear' + theMonth + '">' + theYear + '</span> 年 <span id="ycalendar_currentMonth' + theMonth + '">' + (theMonth + 1) + '</span> 月';
			monthContainer.appendChild(monthTitle);
			
			// 创建星期列表
			weekContainer = D.createElement('ul');
			for (i = 0; i < 7; i += 1) {
				weekItems[i] = D.createElement('li');
				if (i === 0 || i === 6) {
					weekItems[i].className = 'yweekend';
				}
				weekItems[i].innerHTML = day[i];
				weekContainer.appendChild(weekItems[i]);
			}
			monthContainer.appendChild(weekContainer);
			
			// 创建每月的天数容器
			datesContainer[theMonth] = D.createElement('div');
			datesContainer[theMonth].className = 'ycalendar_days';
			datesContainer[theMonth].id = 'ycalendar_Days' + theMonth;
	
			this.getDays(theYear, theMonth, datesContainer[theMonth]);	
			monthContainer.appendChild(datesContainer[theMonth]);
			monthContainer.style.display = 'block';
			// 将完整的月份日历追加到日历容器中		
			calendarContainer.appendChild(monthContainer);
		},
		getDays: function(year, month, parent){
			var numDays = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			var theDays = numDays[month], len;
			var dates = [], date = 0;
			var i, n, m, emptyWeek = [], firstWeek = new Date(year, month, 1).getDay();
			if (parent.firstChild) {
				while (parent.firstChild) {
					parent.firstChild.parentNode.removeChild(parent.firstChild);
				}
			}
			for (n = 0; n < firstWeek; n += 1) {
				emptyWeek.push(D.createElement('span'));
				parent.appendChild(emptyWeek[n]);
			}
			for (i = 0; i < theDays; i += 1) {
				dates[i] = this.setDay;
			}
			for (m = 0, len = dates.length; m < len; m += 1) {
				date = m + 1;
				dates[m](year, month, date, parent);
			}
		},
		setDay: function(year, month, date, parent){
			var dateContainer = D.createElement('span');
			var curDate = time.getDate(), curMonth = time.getMonth();
			var fullDate = year + '-' + (month + 1) + '-' + date;
			var thisDay = (new Date(year, month, date)).getDay();

if (curDate === date && curMonth === month && currentYear === year) {
				dateContainer.id = 'ycalendar_today';
			}
			if (thisDay === 0 || thisDay === 6) {
				dateContainer.className = 'yweekend';
			}
			dateContainer.innerHTML = date;
			parent.appendChild(dateContainer);
			
			dateContainer.onclick = function(){
				alert(fullDate+' '+'星期'+ day[thisDay]);
			};
		},
		lastYear: function(index){
			thisYear[index] -= 1;
			if (thisYear[index] >= minYear) {
				this.chgYear(index);
				this.getDays(thisYear[index], (thisMonth[index] - 1), datesContainer[index]);
			}
		},
		lastMonth: function(index){
			thisMonth[index] -= 1;
			if (thisMonth[index] < 1) {
				thisMonth[index] = 12;
				this.lastYear(index);
			}
			this.chgMonth(index);
			this.getDays(thisYear[index], (thisMonth[index] - 1), datesContainer[index]);
		},
		nextMonth: function(index){
			thisMonth[index] += 1;
			if (thisMonth[index] > 12) {
				thisMonth[index] = 1;
				this.nextYear(index);
			}
			this.chgMonth(index);
			this.getDays(thisYear[index], (thisMonth[index] - 1), datesContainer[index]);
		},
		nextYear: function(index){
			thisYear[index] += 1;
			if (thisYear[index] <= maxYear) {
				this.chgYear(index);
				this.getDays(thisYear[index], (thisMonth[index] - 1), datesContainer[index]);
			}
		},
		chgYear: function(index){
			var currYear = D.getElementById('ycalendar_currentYear' + index);
			currYear.innerHTML = thisYear[index];
		},
		chgMonth: function(index){
			var currMonth = D.getElementById('ycalendar_currentMonth' + index);
			currMonth.innerHTML = thisMonth[index];
		}
	};
}();
YCalendar.addCSS();

Download：ycalendar.rar

个人简介

姓名：姚海啸
年龄：28岁
学历：大专
职业：前端工程师

奋斗目标：成为顶尖的前端工程师

我的作品

YAOHAIXIAO.COM