calendar.js

$(document).ready(function(){
	var tableStyle = {
		'width':'900px',
		'height':'400px',
		'border-collapse':'collapse',
		'font-family':'Monaco'
	};

	var yearMonth = {
		'height':'50px',
		'text-align':'center',
		'font-size':'24px',
		'font-weight':'bold',
		'letter-spacing':'3px',
		'color':'#aaa'
	};

	var captionStyle = {
		'height':'20px',
		'border-right':'#eee 1px solid',
		'background-color':'#bbb',
		'font-size':'14px',
		'line-height':'20px',
		'color':'#fff'
	};

	var dayStyle = {
		'padding':'3px 0 0 5px',
		'height':'80px',
		'border':'#ccc 1px solid',
		'font-size':'14px',
		'vertical-align':'top',
		'color':'#555'
	};

	myDate = new Date();
	myWeekTbl = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
	myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	myYear = myDate.getFullYear();
	
	if (((myYear%4)==0 && (myYear%100)!=0) || (myYear%400)==0){
		myMonthTbl[1] = 29;
	}	
	myMonth = myDate.getMonth();
	myToday = myDate.getDate();
	myDate.setDate(1);
	myWeek = myDate.getDay();
	myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
	myTable = new Array(7*myTblLine);

 	
	for(i=0; i<7*myTblLine; i++) myTable[i]="　";
	for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1;
 	
 	var calTable = $('<table />').css(tableStyle);
 	var calCaption = $('<td />').attr('colspan','7').css(yearMonth).text(myYear + ' / ' + (myMonth+1));
 	var calCaptionContainer = $('<tr />').append(calCaption);
 	calTable.append(calCaptionContainer);
 	
	var weekCaptions = $("<tr>");
	for(i=0; i<7; i++){	
		var weekCaption = $('<td />').attr('align','center').css(captionStyle);	
		if(i==0) {
			weekCaption.css('background-color','#ff7374');
		} else if(i==6) {
			weekCaption.css({'background-color':'#7eadff','border-right':'#7eadff 1px solid'});
		}
		weekCaption.text(myWeekTbl[i]);
		weekCaptions.append(weekCaption);
 	}
 	calTable.append(weekCaptions);

	for(i=0; i<myTblLine; i++){	
		var weekDays = $("<tr>");
		for(j=0; j<7; j++){	
			var weekDay = $('<td />').css(dayStyle);
			myDat = myTable[j+(i*7)];
			weekDays.append(weekDay.text(myDat));
		}	
		calTable.append(weekDays);
	}	
	$('body').append(calTable);
});