小賴的實戰記錄

最近需要客製化自己的日曆元件。

很難嗎？好像很難。

先動手做看看。

第一步，先做一個js元件。

function Calendar(id){
	this.id = id;
	this.calendars = $('#'+id);	
}

第二步，判斷某年某月有幾天，要建立閏年的判斷

https://zh.wikipedia.org/wiki/%E9%97%B0%E5%B9%B4

閏年的演算法

Calendar.prototype.getMonthDays = function(year,month) {
	var monthDays = [31,28,31,30,31,30,31,31,30,31,30,31];
	var days = monthDays[month-1];
	if(month==2 && this.isLeapYear(year,month)) {
		days = 29;
	}
	return days;
}

Calendar.prototype.isLeapYear = function(year,month) {
	var isLeapYear = false;

	if(year%400==0 || year%4==0 && year%100!=0) {
		isLeapYear = true;
	} 

	return isLeapYear;
}

三、再來，判斷某一天，是禮拜幾

//0=日、1=一、2=二....
Calendar.prototype.getWeek = function(year,month,day) {
	var date = new Date();
	date.setFullYear(year, month-1, day);
	var day  = date.getDay();
	return day;
}

四、建立某年某月的月曆

Calendar.prototype.addCalendar = function (year,month) {	
	var objCalendar = $('<div class="row calendar"><div class="monthyear clearfix"></div></div>');
	var objDay2 = $('<div class="col-md-1 day2">&nbsp;</div>');
	var objDay1 = $('<div class="col-md-1 day">&nbsp;</div>');
	var objClear = $('<div class="clearfix"></div>');

	objCalendar.find('.monthyear').html(year+'年'+month+'月');
	
    var days = this.getMonthDays(year,month);
    var week = this.getWeek(year,month,1);
    var w =0;
	var j = 0;
	
	for(w=0;w<week;w++) {
		j++;
		var objDay = objDay2.clone();
		objCalendar.append(objDay);
	}

	var i =1;
	for(i=1;i<=days;i++) {
		j++;
		var objDay = objDay1.clone();
		objDay.html(i);
		objCalendar.append(objDay);
		objDay.addClass('day_'+year+((month>10)?month:'0'+month)+i);

		if(j%7==1 || j%7==0) {
			objDay.addClass('holiday');
		}

		if(j%7==0) {
			objCalendar.append(objClear.clone());
		}
	}

	while(j%7!=0) {
		j++;
		var objDay = objDay2.clone();
		objCalendar.append(objDay);
	}
	this.calendars.append(objCalendar);	
}

這樣就完成了。