본문 바로가기

개발도구/PHP,ASP,JSP,SCRIPT

[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"; 
}