📂 JS 실습하기/달력만들기
달력만들기 두번째 도전기 🕔 2016. 8. 31. 18:19
여전히 음력 달력은 포기... ─.─;;
<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 = " " ;
}
// <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 == " " ){ // 날짜가 없는 빈줄일 경우, 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>
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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;"> </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>
|
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
'JS 실습하기 > 달력만들기' 카테고리의 다른 글
| 음력 달력은 포기... (0) | 2015.03.11 |
|---|---|
| 달력만들기 첫 도전기 (3) | 2015.01.17 |