Recent posts

Recent comments

Archive

Calender

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
📂 JS 실습하기/달력만들기

달력만들기 두번째 도전기 🕔 2016. 8. 31.



여전히 음력 달력은 포기... ─.─;; 



<style type="text/css">
.calenderArea { 
        width: 230px; height: 250px; padding: 15px; border: 3px double gray; 
        font-size: 12px; line-height: 12px; 
        font-family: "Lucida Sans Unicode", "Lucida Grande", 'New Gulim', '새굴림', Gulim, sans-serif; 
} 
.calenderArea .buttonWrapper { margin-bottom: 5px; text-align: center; vertical-align: middle; } 

.calenderArea .titleDate { display: inline-block; width: 78px; text-align: left; vertical-align: bottom; } 

.calenderArea button { 
        width: 22px; padding: 0; 
        border: 2px outset #dfdfdf; border-radius: 3px; background-color: #ececec; 
        font: inherit; font-size: 8px; vertical-align: middle; 
} 
.calenderArea button:active { border-style: inset; } 

.calenderArea table { 
        border-width: 0; border-collapse: collapse; 
        font-size: 12px; font-family: 'New Gulim', '새굴림', Gulim, Arial, sans-serif; 
} 
.calenderArea th, 
.calenderArea td { width: 35px; padding: 10px 0; border: 1px solid gray; text-align: center; vertical-align: middle; } 

.calenderArea .blankRow td { border-width: 0; height: 1px; font-size: 1px; line-height: 1px; } 

.calenderArea .sunday { color: red !important; }/* 오늘 날짜가 일요일과 겹칠 경우를 대비하여  !important */ 
.calenderArea .today { background-color: lavender; } 

</style>

<script type="text/javascript">
function Calender (){

    // 달력으로 사용할 <table>을 준비하기 
    var _newTable = function (){ 

            var x = 0, n = 0, tr, cell; 

            var table = document.createElement ( "TABLE" ); 
            var thead = document.createElement ( "THEAD" ); 
            var tbody = document.createElement ( "TBODY" ); 

            for ( x = 0; x < 7; x++ ) { 
                  tr = document.createElement ( "TR" ); 

                  for ( n = 0; n < 7; n++ ){ 
                        if ( x == 0 ){  cell = document.createElement ( "TH" );  } 
                        else {  cell = document.createElement ( "TD" );  } 

                        tr.appendChild ( cell ); 
                  } 

                  if ( x == 0 ){  thead.appendChild ( tr );  } 
                  else {  tbody.appendChild ( tr );  } 
            } 

            table.appendChild ( thead ); 
            table.appendChild ( tbody ); 

            return table; 
    }(); 

    var _calender = { 
            Table : _newTable, 
            Title : { 
                    Week : [ "일", "월", "화", "수", "목", "금", "토" ] 
            }, 
            Date : new Date(), 

            Inner : function (){ 
                    var d = this.Date; 
                    var year = d.getFullYear(); 
                    var month = d.getMonth(); 

                    // 2월 윤달에 대한 설정 
                    var feb = (  ( (year % 4 == 0) && (year % 100 != 0) ) || (year % 400 == 0)  ) ? 29 : 28; 
                    var totalDays = [ 31, feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; 

                    // 당월 첫날의 요일과 당월의 총 날짜 
                    var firstWeek = new Date( year, month, 1 ).getDay(); 
                    var lastDay = totalDays[ month ]; 

                    // 오늘 날짜인지를 확인하기 위한 작업 
                    var today = new Date(); 
                    var day = today.getDate(); 
                    if( day <= lastDay ){  d.setDate( day );  } 

                    var isToday = ( d.toDateString() == today.toDateString() ); 

                    var text = ""; 

                    // ie 7 이하 버전을 위한 설정 
                    if ( navigator.userAgent.indexOf( "Trident" ) < 0 && navigator.userAgent.indexOf( "MSIE" ) > 0 ) { 
                            text = "&nbsp;" ; 
                    } 


                    // <td>에 들어갈 내용들을 배열에 담아놓기 
                    var array = new Array( 49 ); 

                    var x = 0, n = 0; 
                    for ( x = 0; x < 49; x++ ){  array[ x ] = text;  } 

                    for ( x = firstWeek; x < firstWeek + lastDay; x++ ){ 
                            n++; 
                            array[ x ] = n; 
                    } 

                    // <tr>, <td> 설정하기 ( innerHTML , class 등등) 
                    var td = this.Table.getElementsByTagName( "TD" ); 
                    var cell, row; 
                    for ( x = 0; x < td.length; x++ ){ 
                            cell = td[ x ]; 
                            cell.className = ""; 

                            n = array[ x ]; 
                            cell.innerHTML = n; 

                            if ( x % 7 == 0 ){  
                                    cell.className = "sunday"; // 일요일일 경우, class="sunday" 

                                    row = cell.parentNode; 
                                    row.className = ""; 

                                    text = cell.innerHTML; 
                                    if ( text == "" || text == "&nbsp;" ){ // 날짜가 없는 빈줄일 경우, class="blankRow" 
                                        if ( x > 0 ){  row.className = "blankRow";  } 
                                    } 
                            } 

                            // 오늘 날짜일 경우, class="today" 
                            // 오늘 날짜가 일요일과 겹칠 경우, class="today sunday" 
                            if ( isToday && n == day ){ 
                                    if ( cell.className.length > 0 ){  cell.className = "today" + " " + cell.className;  } 
                                    else {  cell.className = "today";  } 
                            } 
                    } 
            }, 

            Set : function ( parent ){ 
                    this.Inner(); 

                    // <th> 설정하기 
                    var table = this.Table; 
                    var th = table.getElementsByTagName( "TH" ); 

                    var x = 0; 
                    for ( x = 0; x < th.length; x++ ){ 
                            if ( x == 0 ){  th[ x ].className = "sunday";  } 
                            th[ x ].innerHTML = this.Title.Week[ x ]; 
                    } 

                   // <table>을 문서에 집어넣기 
                    parent.appendChild ( table ); 
            }, 

            // 달력 바꾸기 함수(버튼식) - 전월 혹은 전년도 달력 
            Previous : function ( text ){ 
                    this.Date.setDate( 1 ); // ← 달력이 바뀔때, 2개월을 넘어가버리는 오류를 잡기 위함.  

                    text = ( text + "" ).toLowerCase(); 
                    var d = this.Date; 
                    var year = d.getFullYear(); 
                    var month = d.getMonth(); 

                    if ( text == "month" ){ 
                            month -= 1; 
                            if ( month < 0 ){ 
                                year -= 1; 
                                if ( year > 999 ){  this.Date.setMonth( month );  } 
                            } 
                            else {  this.Date.setMonth( month );  } 
                    } 
                    else if ( text == "year" ){ 
                        year -= 1; 
                        if ( year > 999 ){  this.Date.setFullYear( year );  } 
                    } 

                    this.Inner(); 
            }, 

            // 달력 바꾸기 함수(버튼식) - 다음달 혹은 다음년도 달력 
            Next : function ( text ){ 
                    this.Date.setDate( 1 ); 

                    text = ( text + "" ).toLowerCase(); 
                    var d = this.Date; 
                    var year = d.getFullYear(); 
                    var month = d.getMonth(); 

                    if ( text == "month" ){ 
                            month += 1; 
                            if ( month > 11 ){ 
                                year += 1; 
                                if ( year < 10000 ){  this.Date.setMonth( month );  } 
                            } 
                            else {  this.Date.setMonth( month );  } 
                    } 
                    else if ( text == "year" ){ 
                        year += 1; 
                        if ( year < 10000 ){  this.Date.setFullYear( year );  } 
                    } 

                    this.Inner(); 
            }, 

            // 달력 바꾸기 함수 (직접 입력 방식) 
            Change : function ( number ){ 
                    var num = parseInt( number, 10 ); 
                    if ( isNaN( num ) ){ 
                        console.log( number + "은(는) 숫자가 아닙니다." ); 
                        return; 
                    } 

                    this.Date.setDate( 1 ); 
                    if ( num < 99 ){  this.Date.setMonth( num - 1 );  } 
                    else if ( 999 < num && num < 10000 ){  this.Date.setFullYear( num );  } 

                    this.Inner(); 
            } 
    }; 

    return _calender;     
} 

</script>
2025년 4월
일월화수목금토
12345
6789101112
13141516171819
20212223242526
27282930
 
<div class="calenderArea">
    <div class="buttonWrapper">
        <button onclick="showPrev()"> ≪ </button> 
        <span class="titleDate" id="titleDate"></span> 
        <button onclick="showNext()"> ≫ </button>
    </div>

    <div id="calenderWrapper"></div>
</div>

<script type="text/javascript">
var cal = new Calender(); 

cal.Set( calenderWrapper ); 

var d = cal.Date; 
var year = d.getFullYear(); 
var mon = d.getMonth() + 1; 

titleDate.innerHTML = year + "년 " + mon + "월"; 

function showPrev(){ 
    cal.Previous( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + "년 " + mon + "월"; 
} 

function showNext(){ 
    cal.Next( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + "년 " + mon + "월"; 
} 
</script>
2025년 4월
일월화수목금토
12345
6789101112
13141516171819
20212223242526
27282930
 
<div class="calenderArea" style="height: auto">
    <div class="buttonWrapper">
        <button onclick="showPrev()"> ≪ </button> 
        <span class="titleDate" id="titleDate"></span> 
        <button onclick="showNext()"> ≫ </button>
    </div>

    <div id="calenderWrapper"></div>
</div>

<script type="text/javascript">
var cal = new Calender(); 

cal.Set( calenderWrapper ); 

var d = cal.Date; 
var year = d.getFullYear(); 
var mon = d.getMonth() + 1; 

titleDate.innerHTML = year + "년 " + mon + "월"; 

function showPrev(){ 
    cal.Previous( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + "년 " + mon + "월"; 
} 

function showNext(){ 
    cal.Next( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + "년 " + mon + "월"; 
} 
</script>
2025. 4.
SunMonTueWedThuFriSat
12345
6789101112
13141516171819
20212223242526
27282930
 
<div class="calenderArea">
    <div class="buttonWrapper">
        <button onclick="showPrev()"> ≪ </button> 
        <span class="titleDate" id="titleDate" style="width: 54px;"></span> 
        <button onclick="showNext()"> ≫ </button>
    </div>

    <div id="calenderWrapper"></div>
</div>

<script type="text/javascript">
var cal = new Calender(); 

cal.Title.Week = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]; 
cal.Set( calenderWrapper ); 

var d = cal.Date; 
var year = d.getFullYear(); 
var mon = d.getMonth() + 1; 

titleDate.innerHTML = year + ". " + mon + "."; 

function showPrev(){ 
    cal.Previous( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + ". " + mon + "."; 
} 

function showNext(){ 
    cal.Next( "month" ); 
    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 
    titleDate.innerHTML = year + ". " + mon + "."; 
} 
</script>
2025. 04.
일월화수목금토
12345
6789101112
13141516171819
20212223242526
27282930
 
<div class="calenderArea">
    <div class="buttonWrapper">
        <button onclick="prevYear()"> ≪ </button> 
        <span class="titleDate" id="titleYear" style="width: 36px;"></span> 
        <button onclick="nextYear()"> ≫ </button>

        <button onclick="prevMon()"> ≪ </button> 
        <span class="titleDate" id="titleMon" style="width: 22px;"></span> 
        <button onclick="nextMon()"> ≫ </button>
    </div>

    <div id="calenderWrapper"></div>
</div>

<script type="text/javascript">
var cal = new Calender(); 

cal.Set( calenderWrapper ); 

var d = cal.Date; 
var year = d.getFullYear(); 
var mon = d.getMonth() + 1; 
if ( mon < 10 ) {  mon = "0" + mon;  } 

titleYear.innerHTML = year + "."; 
titleMon.innerHTML = mon + "."; 

function prevYear(){ 
    cal.Previous( "year" ); // 연도를 바꿀려면은 "year" 

    year = d.getFullYear(); 

    titleYear.innerHTML = year + "."; 
} 

function nextYear(){ 
    cal.Next( "year" ); 

    year = d.getFullYear(); 

    titleYear.innerHTML = year + "."; 
} 

function prevMon(){ 
    cal.Previous( "month" ); // 달(月)을 바꿀려면은 "month" 

    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 

    if ( mon < 10 ) {  mon = "0" + mon;  } 

    titleYear.innerHTML = year + "."; 
    titleMon.innerHTML = mon + "."; 
} 

function nextMon(){ 
    cal.Next( "month" ); 

    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 

    if ( mon < 10 ) {  mon = "0" + mon;  } 

    titleYear.innerHTML = year + "."; 
    titleMon.innerHTML = mon + "."; 
} 
</script>
일월화수목금토
12345
6789101112
13141516171819
20212223242526
27282930
 
<div class="calenderArea" style="height: 300px;">

    <div class="buttonWrapper" style="text-align: left">
        <input type="text" id="titleYear" title="네 자릿수의 연도를 입력하세요"> 
        <button onclick="changeYear()"> ▼ </button> 
        <input type="text" id="titleMon" title="달(月)을 입력하세요"> 
        <button onclick="changeMon()"> ▼ </button> 
    </div>

    <p id="alertArea" style="display: none; border: 1px solid red;">&nbsp;</p>

    <div id="calenderWrapper"></div>
</div>

<script type="text/javascript">
var cal = new Calender(); 

cal.Set( calenderWrapper ); 

var d = cal.Date; 
var year = d.getFullYear(); 
var mon = d.getMonth() + 1; 

titleYear.value = year + "."; 
titleMon.value = mon + "."; 

function changeYear(){ 
    var text = titleYear.value.replace( /\D/g, "" ); 
    if ( text.length > 4 ){ 
        alertArea.style.display = "block"; 
        alertArea.innerHTML = "연도는 네 자릿수이어야 합니다! 다시 입력하세요."; 
        return; 
    } 
    else {  alertArea.style.display = "none";  } 

    cal.Change( text ); 

    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 

    titleYear.value = year + "."; 
    titleMon.value = mon + "."; 
} 

function changeMon(){ 
    var text = titleMon.value.replace( /\D/g, "" ); 
    if ( text.length > 2 ){ 
       alertArea.style.display = "block"; 
       alertArea.innerHTML = "달(月)은 두 자리를 넘을 수 없습니다! 다시 입력하세요."; 
       return; 
    } 
    else {  alertArea.style.display = "none";  } 

    cal.Change( text ); 

    year = d.getFullYear(); 
    mon = d.getMonth() + 1; 

    titleYear.value = year + "."; 
    titleMon.value = mon + "."; 
} 
</script>


이 블로그에서 함께 볼만한 글

[ 자바스크립트 ] 오늘 날짜와 현재 시각 ─ Date()
[ 자바스크립트 ] table 태그 만들기 - createElement()
[ 자바스크립트 ] className 사용법



이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*

저작자표시 비영리 동일조건

'JS 실습하기 > 달력만들기' 카테고리의 다른 글

음력 달력은 포기...  (0) 2015.03.11
달력만들기 첫 도전기  (3) 2015.01.17

Blog is powered by / Designed by Tonks. Invitation RSS Feed

티스토리툴바