인터넷정보

[스크립트] 달력 3개월치 (alee 님꺼 수정)

알 수 없는 사용자 2008. 2. 14. 15:50
원본 :
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=48169&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B4%DE%B7%C2&sop=and

필요에 의해서 두어시간만에 급조한거라....
좀 지저분합니다만 혹시나 필요하신 분이 계실까봐 올립니다. (버그가 있을수도 있음)
3항연산자 눈깔 빠지네요...  -_-;
깔끔한 소스에 괜히 손댄건 아닌지.....



좋은 소스 공유해주신 alee 님께 감사드립니다....... ^^;;


수정 소스
####################################################
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--

var target;
var temp;
var BY;
var BM;
var BD;


function showCalendar(ymd) {
       
        var tmp = ymd.split("-");
        var y = parseInt(tmp[0]);
        var m = parseInt(tmp[1]);
        var d = parseInt(tmp[2]);
       
        var text = '<span style="cursor:pointer;font-size:11px;" onclick="showCalendar(\''+(y-1)+'-'+m+'-'+d+'\')"> ◀◀</span>';
    text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==1?(y-1)+'-'+12:y+'-'+(m-1))+'-'+d+'\')"> ◀ </span>';
    text += '<span style="font-size:13px;font-weight:bold;">[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']</span>';
    text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==12?(y+1)+'-'+1:y+'-'+(m+1))+'-'+d+'\')"> ▶ </span>';
    text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(y+1)+'-'+m+'-'+d+'\')">▶▶</span>';
   
   
    var text1 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan="7" style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
    text1 += y + '년 ' + ((m < 10) ? ('0' + m) : m) + '월';
    text1 += '</td>';

    var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
          +m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;
    for (i = 0; i < 42; i++) {
      if (i%7==0) text1 += '</tr>\n<tr>';
            if((i+1-d1) == BD && m==BM && y==BY){
                    text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
            }else{
             
              if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30)) {
                  text1 += '<td> </td>';
              }else {
                  text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
              }
           
            }
    }
    text1 += '</tr>\n</table>';
   
        var m1 = m + 1;
        var text2 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
    text2 += (m==12?(y+1)+'년 ' + '0'+1:y+'년 '+ ((m1<10) ? ('0' + m1) : m1)) + '월';
    text2 += '</td>';
    var d2 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
          +m1*2+(m1*5-m1*5%9)/9-(m1<3?y%4||y%100==0&&y%400?2:3:4))%7;
    for (i = 0; i < 42; i++) {
        if (i%7==0) text2 += '</tr>\n<tr>';
       
        if((i+1-d2) == BD && m1==BM && y==BY){
            text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
          }else{
       
            if (i < d2 || i >= d2+(m1*9-m1*9%8)/8%2+(m1==2?y%4||y%100==0&&y%400?28:29:30))
                text2 += '<td> </td>';
            else
                text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
          }
    }
    text2 += '</tr>\n</table>';   

        var m2 = m + 2;
        var text3 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
   
    text3 += (m==12?(y+1)+'년 ' +'0'+2: m==11?(y+1)+'년 ' +'0'+1:y +'년 ' +((m2 < 10) ? ('0' + m2) : m2)) + '월';
   
    text3 += '</td>';
        if(m2==14){m2=2; y=y+1;}
    var d3 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
          +m2*2+(m2*5-m2*5%9)/9-(m2<3?y%4||y%100==0&&y%400?2:3:4))%7;
    for (i = 0; i < 42; i++) {
        if (i%7==0) text3 += '</tr>\n<tr>';
       
        if((i+1-d3) == BD && m2==BM && y==BY){
            text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):m==11?(y+1):y)+'-'+ ((m==12)?'0'+2:(m==11)?'0'+1:m2<10?'0'+m2:m2)+'-'+((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3))+'\');">' + (i+1-d3) + '</td>';
        }else{
            if (i < d3 || i >= d3+(m2*9-m2*9%8)/8%2+(m2==2?y%4||y%100==0&&y%400?28:29:30))
                  text3 += '<td> </td>';
            else
                text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m2<10?'0'+m2:m2) +'-'+ ((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3)) +'\');">' + (i+1-d3) + '</td>';
                }
           
    }
    text3 += '</tr>\n</table>';
//alert(m+'/'+m1+'/'+m2);
document.getElementById('tt').innerHTML =  text;
document.getElementById('calendarDiv1').innerHTML =  text1;
document.getElementById('calendarDiv2').innerHTML =  text2;
document.getElementById('calendarDiv3').innerHTML =  text3;
}


function showCal(obj){
var st = getRealOffsetTop(obj)+20;;
var sl = getRealOffsetLeft(obj);

document.getElementById("calendar").style.top = st;
document.getElementById("calendar").style.left = sl;
document.getElementById("calendar").style.display="block";

target = obj;
temp = target.value.split("-");
BY = parseInt(temp[0]);
BM = parseInt(temp[1]);
if(temp[2].substr(0,1) == "0"){
BD = parseInt(temp[2].substr(1,1));
}else{
BD = parseInt(temp[2]);
}
showCalendar(obj.value);
}

function putDate(d){
    target.value = d;
    closeCal();
}
function closeCal(){
    document.getElementById("calendar").style.display="none";
}
function getRealOffsetTop(o) { return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0; }
function getRealOffsetLeft(o) { return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0; }

//-->
</script>
<style>
.calPop {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 2;
top :0px;
left:0px;
display: none;
overflow:hidden;
width: 450px;
height:180px;
color: black;
position: absolute;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<input type="text" name="checkindate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkindate')[0]);" value="2008-03-05" readonly>
<input type="text" name="checkoutdate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkoutdate')[0]);" value="2007-12-10" readonly>
<div id="calendar" class="calPop">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="position: absolute">
    <tr>
        <td style="position: absolute">
                <table cellpadding="0" cellspacing="5" border="0" style="border:1px solid #80BFFF;">
                    <tr>
                        <td colspan="3" align="center" id="tt"></td>
                    <tr>
                        <td id="calendarDiv1" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
                        <td id="calendarDiv2" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
                        <td id="calendarDiv3" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="3" style="font-size:11px;font-family:verdana;"><span style="cursor:pointer;font-weight:bold;" onClick="closeCal();">[Close]</span></td>
                    </tr>
                </table>
        </td>
    </tr>
</table>
</div>
</body>
</html>

출처:http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=59369&page=1
반응형