[HTML] 달력 클래스

<!-- 레이어 달력 -->
 
<!-- <div style="display:block; top:130px; left:550px;" id="date_layer"> -->

<!-- <div style="display:block; top:130px; left:747px;" id="date_layer"> -->

<!-- 20090706 수정 달력선택 레이어 -->

<div id="date_layer" style="display:none; top:160px; left:460px;" >

<h3><span>달력</span></h3>

<div class="mlv">

<p class="location">

<span class="back col3" onclick="moveMonth(-1);"> ◀ </span>

<span class="date col2"><strong id="strYear"></strong>.<strong id="strMonth"></strong></span>

<span class="next col3" onclick="moveMonth(1);"> ▶ </span>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="javascript:CloseCal();"><img src="<?=$cmsUrl?>/images/btn_close1.gif" alt="닫기" /></a>

</p>

</div>

<div id="strDay"></div>

</div>

<!--// 달력선택 레이어 -->


calender.js 

var now = new Date(); 

var thisYear = now.getFullYear(); 

var thisMonth = now.getMonth(); 

var selectDate; 

if(callPage == null) var callPage = ''; 

if(strGubun == null) var strGubun = ''; 

function MakeCal(year, month)

{

var LastDay = 0; 

var makeDate; 

//달의 마지막 날 

for(i = 26; i <= 31; i++)

{

makeDate = new Date(year, month, i); 

//alert(i + ")" + year + "-" + month + "=>" + makeDate.getFullYear() + "-" + makeDate.getMonth()) ;

if(year != makeDate.getFullYear() || month != makeDate.getMonth()) {

LastDay = i - 1; 

break; 

}

}

if(LastDay == 0) LastDay = i - 1; 

//시작되는 요일 

makeDate = new Date(year, month, 1); 

var FirstDate = makeDate.getDay(); 

var strCal  = " <table class=\"calendar col1\" cellspacing=\"0\" cellpadding=\"0\">\n";

strCal += " <thead>\n";

strCal += " <tr>\n";

strCal += " <th colspan=\"7\" valign=\"top\" align=\"center\"><div class=\"dis1\"><span class=\"col3\">일</span><span>월</span><span>화</span><span>수</span><span>목</span><span>금</span><span>토</span></div></th>\n";

strCal += " </tr>\n";

//var LastDay = 0; 

var makeDate; 

var i = 0; 

var j = 0; 

while(i <= LastDay || j <= 6) 

{

firstClass = ""; 

//일요일 클래스 지정 

if( j > 6) 

{

j = 0; 

strCal += " <tr>\n";

firstClass = "class=\"col3\"";

}

//1일 전의 공백 

if( i == 0) 

{

for(j = 0; j < FirstDate; j++)

{

if(j == 0) firstClass = ""; else firstClass = ""; 

strCal += " <td "+firstClass+"></td>\n";

}

}

i++; 

if(i <= LastDay) 

{

if(callPage != 'formation') 

{

strCal += " <td id=\'tdDay_"+i+"\'><a href=\"javascript:dayClick(document.getElementById('tdDay_"+i+"'),'"+i+"', '"+j+"');\" "+firstClass+">"+i+"</td>\n";

}

else

{

if(j==1)

strCal += " <td id=\'tdDay_"+i+"\'><a href=\"javascript:dayClick(document.getElementById('tdDay_"+i+"'),'"+i+"', '"+j+"');\" "+firstClass+">"+i+"</td>\n";

else

strCal += " <td id=\'tdDay_"+i+"\'><a href=\"javascript:alert(\'월요일을 선택하시기 바랍니다\');\" "+firstClass+">"+i+"</td>\n";

}

}

//마지막 날 초과시 공백 

else 

{

strCal += " <td></td>\n";

}

if( j == 6) 

{

strCal += " </tr>\n";

}

j++; 

}

strCal += " </table>\n";

//년, 월, 일자 출력 

document.getElementById("strYear").innerHTML = thisYear; 

if(thisMonth + 1 < 10) 

document.getElementById("strMonth").innerHTML = "0" + (thisMonth+1); 

else 

document.getElementById("strMonth").innerHTML = (thisMonth+1); 

document.getElementById("strDay").innerHTML = strCal;

//frmInput.testCal.value = strCal; 

}

//전달, 다음달 

function moveMonth(arg) 

{

var makeDate = new Date(thisYear, thisMonth + arg, 1); 

thisYear = makeDate.getFullYear(); 

thisMonth = makeDate.getMonth(); 

MakeCal(thisYear, thisMonth); 

}

//날짜 선택시 

function dayClick(obj, day, date)

{

//obj.className = "day_on"; 

selectDate.value = thisYear; 

if(strGubun != '') selectDate.value +=  strGubun; 

if(thisMonth+1 < 10) 

selectDate.value += "0" + (thisMonth+1); 

else 

selectDate.value +=  thisMonth+1; 

if(strGubun != '') selectDate.value +=  strGubun; 

if(day < 10) 

selectDate.value += "0" + (day); 

else 

selectDate.value +=  day;

if(selectDate.value && callPage == 'formation') rtnDate(selectDate.value);

if(callPage != 'salestock') CloseCal(); 

}

//날짜 클릭시 달력 출력 

function inputDate(arg)

{

var selday = ""; 

selectDate = arg; 

if(selectDate.value.length == 8) 

{

thisYear = selectDate.value.substr(0, 4); 

thisMonth = selectDate.value.substr(4, 2) - 1; 

selday = selectDate.value.substr(6, 2); 

}

MakeCal(thisYear, thisMonth); 

/* if(selectDate.name == "sdate" ) 

document.getElementById("calendar2").style.left = "30px"; 

else if(callPage == 'formation')

document.getElementById("calendar2").style.left = "112px"; 

else 

document.getElementById("calendar2").style.left = "112px"; */

document.getElementById("date_layer").style.display = "block"; 

}

function CloseCal()

{

alert("11");

selectDate = null; 

document.getElementById("date_layer").style.display = "none"; 

}