티스토리 뷰

LANGUAGE/JAVA SCRIPT

[JAVA SCRIPT] 만년 달력

진심스테이크 2018. 4. 5. 22:44

 

 

 

<html>  
<head>  
<title> 날짜 셀렉터 </title>    
<script language="JavaScript">  
  
   function onMouse(td){  
        td.style.backgroundColor = "white";    
        td.style.fontWeight="bold";  
        td.style.cursor="hand";  
    }  

    function outMouse(td,today){  
        if(today=="today"){ //오늘 날짜 건들 시  
            td.style.backgroundColor = "red";  
            td.style.color="white"  
            td.style.fontWeight="bold";  
        }
        else{  
            td.style.backgroundColor = "white";  
            td.style.fontWeight="normal"; //마우스가 건드는 숫자만 굵어짐 
        }  
    }  

    function calendar(year,month){ //달력 함수  
        //내장 객체
        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; //나중에 앞뒤 빈 날짜칸 계산   
        if (year==null){ //null 일경우, 처음 페이지의 년도는 현재 년도를 가져옴   
            year=nYear;
        } 
  
        if (month==null){ //null 일경우, 처음 페이지의 월은 현재 월을 가져옴
            month=nMonth;  
        }

        eDate= new Date(); //달을 넘길 때 바뀌는 날짜
        eDate.setFullYear(year); //바뀌는 년도 
        eDate.setMonth(month); //바뀌는 월 
        eDate.setDate(1); // 날짜는 1일로 설정  
        var fNumday=eDate.getDay(); //넘길때 달 1일 요일 (숫자)  
        var lastDay=endDay[eDate.getMonth()]; //바뀌는 월의 마지막 날짜  
  
        if ((eDate.getMonth()==1)&&(((eDate.getYear()%4==0)&&(eDate.getYear() %100 !=0))||eDate.getYear() % 400 ==0 )){
            //0월 부터 시작하므로 배열의 첫번째는 2월-> 윤달 계산 4년마다 29일, 100년는 28일, 400년 째는 29일
            lastDay=29;
        }   

        calendarStr  = "<table>"  
        calendarStr += "<tr align=center><td valign=middle>"  
        calendarStr += "<a href=javascript:calendar("+year+","+(month-1)+") class=preNext><</a>" //월을 넘길때 빼기 -1을 해서 넘긴다(년도는 자동 계산)  
        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 += "<a href=javascript:calendar("+year+","+(month+1)+") class=preNext>></a>" //월을 넘길때 더하기 +1을 해서 넘긴다(년도는 자동 계산)  
        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 onmouseover=onMouse(this) onmouseout=outMouse(this,'today') onClick=datePicker("+year+","+month+","+i+",'"+dayName[col]+"')>"+i+"</td>"   
            }
            else {  
                if(col==0){//일요일 
                    calendarStr += "<td class=sunday onmouseover=onMouse(this) onmouseout=outMouse(this,'notToday') onClick=datePicker("+year+","+month+","+i+",'"+dayName[col]+"')>"+i+"</td>"  
                }
                else if(1<=col&&col<=5){//평일  
                    calendarStr += "<td class=workday onmouseover=onMouse(this) onmouseout=outMouse(this,'notToday') onClick=datePicker("+year+","+month+","+i+",'"+dayName[col]+"')>"+i+"</td>"   
                }
                else if(col==6){ //토요일  
                    calendarStr += "<td class=satday onmouseover=onMouse(this) onmouseout=outMouse(this,'notToday') onClick=datePicker("+year+","+month+","+i+",'"+dayName[col]+"')>"+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>"  
        } 

        document.getElementById('calendarView').innerHTML = calendarStr  
}  
  
</script>  
</head>  
<body onload="calendar()">  
<div id="calendarView" ></div>  
</body>  
</html>

 

저작자표시 비영리 변경금지

'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글

[JAVA SCRIPT] 이미지 자동 변경  (0) 2018.04.15
[JAVA SCRIPT] 회원가입 유효성 검사  (0) 2018.04.08
[JAVA SCRIPT] 계산기  (0) 2018.04.05
[JAVA SCRIPT] 배열 관련 객체  (0) 2018.04.05
[JAVA SCRIPT] ALERT( )  (0) 2018.04.05
댓글