자바스크립트로 만든 달력(소스수정)

자바스크립트로 만든 달력은 워낙 소스가 많이 널려 있어서

이것 저것 참조하면서 만들어 봤습니다.
(9월24일 소스 다시 수정 하였습니다. 기존 소스에는 윤달 계산에 오류가 있었습니다.)

결과는 그냥 깔끔하게 이번달 달력만 나옵니다.

이전달, 다음달 할려다가 그냥 올립니다.(나중에 필요하면 다시 만들지요...ㅎㅎ)

<HTML>
<HEAD>
<TITLE> 달력 </TITLE>
<STYLE type="text/css">
<!--

td.today {color: #ffffff;   font-weight:bold; border:solid thin 0pt; font-size:9pt; background-color: #cc0033; }
     td.workday {color: #000099;    font-weight:normal; border:solid thin 0.5pt; font-size:9pt; }
     td.sunday{color: #cc0033; font-weight:normal; border:solid thin 0.5pt; font-size:9pt; }
     td.satday{color: #0000ff;    font-weight:normal; border:solid thin 0.5pt; font-size:9pt; }
     td.week  {color: #000000;   font-weight:normal; border:solid thin 0.5pt; font-size:9pt; background-color:#e6e6e6;width: 18px;text-align:center}

//-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
	var nowDate = new Date();               //오늘 날짜 객체 선언
	var nYear = nowDate.getFullYear();      //오늘의 년도
	var nMonth = nowDate.getMonth() ;       //오늘의 월 ※ 0월부터 시작
	var nDate = nowDate.getDate();           //오늘의 날
	var nNumday = nowDate.getDay();         //오늘의 요일 0=일요일...6=토요일
	var endDay=new Array(31,28,31,30,31,30,31,31,30,31,30,31);      //각달의 마지막 날짜
	var dayName=new Array("일", "월", "화", "수", "목", "금", "토"); // 숫자 요일을 문자 요일 바꿀 함수
	var col=0;  //요일을 이용해서 나중에 앞뒤 빈 날짜칸 계산 
	eDate= new Date(nYear,nMonth,1);       // 1일의 숫자 요일을 구하기 위해서날짜 객체 선언
	var fNumday=eDate.getDay();    // 이번달 1일의 숫자 요일
	var lastDay=endDay[nMonth]; //이번달의 마지막 날짜

function calendar(){

if ((eDate.getMonth()==1)&&(((eDate.getYear()%4==0)&&(eDate.getYear() %100 !=0))||eDate.getYear() % 400 ==0 ))
		{lastDay=29;} // 0월 부터 시작하므로 1는 2월임. 윤달 계산 4년마다 29일 , 100년는 28일, 400년 째는 29일

calendarStr  = "<TABLE>"
		calendarStr +="<TR align=center><TD valign=middle>"

calendarStr +="</TD><TD colspan=5 >"
		calendarStr +="<font size=3 color=black>  <b>"+eDate.getFullYear()+"년 "+(eDate.getMonth()+1)+"월</b></font> "// 해당하는 년도와 월 표시
		calendarStr +="</TD><TD valign=middle>"

calendarStr +="</TD></TR><TR>"
		for (i=0;i<dayName.length;i++){			
			calendarStr +="<TD class=week>"+dayName[i] + "</TD>" // 숫자 요일을 날짜 요일로 입력
		}

calendarStr +="</TR><TR align=center>"

for (i=0;i<fNumday;i++){          // 첫번째 날짜의 숫자 요일을 구해서 그전까지는 빈칸 처리
			calendarStr +="<TD>&nbsp;</TD>" 
			col++;                     
		}

for ( i=1; i<=lastDay; i++){       // 해당 월의 달력 
			if(eDate.getFullYear()==nYear&&eDate.getMonth()==nMonth&&i==nDate){//오늘이면 today 스타일로 표시
				calendarStr +="<TD class=today >"+i+"</TD>" 
			}else{
				if(col==0){              //일요일이면
					calendarStr +="<TD class=sunday>"+i+"</TD>"
				}else if(1<=col&&col<=5){//그외 평범한 날이면
					calendarStr +="<TD class=workday>"+i+"</TD>" 
				}else if(col==6){        //토요일이면
					calendarStr +="<TD class=satday>"+i+"</TD>" 
				}
			}

col++;

if(col==7){     //7칸을 만들면 줄 바꾸어 새 줄을 만들고 다시 첫 칸부터 시작
				calendarStr +="</TR><TR align=center>"
				col=0;
			}
		}

for (i=col;i<dayName.length;i++){        //마지막 날에서 남은 요일의 빈 칸 만들기
			calendarStr +="<TD>&nbsp;</TD>"
		}

calendarStr +="</TR></TABLE>"
		document.getElementById('calendarView').innerHTML = calendarStr //만든 달력 소스를 화면에 보여주기
	}
//-->
</SCRIPT>
</HEAD>
<BODY onload="calendar()">
<div id="calendarView" ></div>   
</BODY>
</HTML>

소스가 약간 이상하게 올라가네요~ 원본소스는 다운 받으시길...

자바스크립트달력.html

<Style> 부터 </Style>은 디자인을 위한 것으로 삭제해도 실행 됩니다.

var nMonth = nowDate.getMonth() ; //오늘의 월 ※ 0월부터 시작

1월이 0월이고
12월이 11월이란 것만 기억하시면 주석을 많이 있어 힘들지 않을듯...

Change Agent(변화변혁 주도자)

자바스크립트로 만든 달력(소스수정)

티스토리툴바

자바스크립트로 만든 달력(소스수정)

관련글

티스토리툴바