|
<html>
<head>
<title>Calendar</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
<!--
td { font-size:9pt; font-family:Verdana;}
//-->
</style>
</head> <body style="margin:0px">
<!-- 이전, 다음 버튼 및 년월 표시 -->
<table width="245" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" width="40" height="30"><input type="button" class="button" value="◀◀"
onclick="to_PreYear()"></td>
<td align="center" width="30"><input type="button" class="button" value="◁" onclick="to_PreMonth ()"></td>
<td align="center" width="105"><div id="cal_title" style="color:#8FACCC"></div></td>
<td align="center" width="30"><input type="button" class="button" value="▷" onclick="to_NextMonth ()"></td>
<td align="center" width="40"><input type="button" class="button" value="▶▶" onclick="to_NextYear()"></td>
</tr>
</table> <!-- 달력 출력 부분 -->
<table width="245" cellspacing="0" cellpadding="0" align="center" id="cal_Table">
<table> <!--
<table width="245" cellspacing="0" cellpadding="0" align="center">
<tr><td height="10" /></td>
<tr>
<td> </td>
<td align="right" width="60"><input type="button" name='today' class="button" value="Today" style="font-family:verdana" onClick="writeValue()"></td>
<td align="right" width="60"><input type="button" name='none' class="button" value="None" style="font-family:verdana" onClick="writeValue()"></td>
<td width="5"> </td>
</tr>
</table>
-->
</BODY>
</HTML> </html>
<!------------------------------- script 시작 -------------------------------->
<script language="javascript">
var date_Of_Month = new Array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ); // 해당 달에 대한 일 수..
// var day_Of_Week = new Array( "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ); // 요일표시 문구
var day_Of_Week = new Array( "日", "月", "火", "水", "木", "金", "土" ); // 요일표시 문구 var date = new Date();
var currYear = date.getFullYear(); // 현재 년
var currMonth = date.getMonth()+1; // 현재 월
var currDate = date.getDate(); // 현재 일
var currDay = date.getDay(); // 현재 요일 var year = currYear; // 출력될 년
var month = currMonth; // 출력된 월 var dayOfWeekBgColor = '#D2DEEB'; // 요일표시 배경색
var preDateColor = '#CECFCE'; // 이전달 날짜 색
var nextDateColor = '#CECFCE'; // 다음달 날짜 색
var saturdayColor = 'blue'; // 토요일 표시 색
var sundayColor = 'red'; // 일요일 표시 색
var mouseOverColor = '#FFFCC0'; // 마우스 오버시 색깔
var mouseOutColor = 'white'; // 마우스 아웃시 색깔 printCal(); // 윤년이면 true 아니면 false를 return
function leapYear(year) {
if( year%4 ==0 && year%100 !=0 || year%400==0 ) { return true; }
return false;
} // 해당 년월에 몇 일이 있는지 return
function getDate(r_year, r_month) {
if( r_month == 13 ) { r_month = 1; r_year++; }
else if( r_month == 0 ) { r_month = 12; r_year--; } if( leapYear(r_year) ) { date_Of_Month[1] = 29; }
else { date_Of_Month[1] = 28; } return date_Of_Month[r_month-1];
} // 출력하는 함수 --a
function printCal() { var rowCnt = cal_Table.rows.length; // 현재 테이블에 출력되어 있는 행 갯수 for( var i=0; i<rowCnt ;i++ ) { // 출력되어 있는 행들 삭제
cal_Table.deleteRow();
} var currDateObj = new Date(year, month-1, 1); // 출력될 달 date 객체
var currDayOfWeek = currDateObj.getDay(); // 출력될 달 1일 요일
var currLastDate = getDate(year, month); // 출력될 달 마지막 일
var printRowCnt = Math.ceil( ( currDayOfWeek + currLastDate ) / 7 ); // 출력될 행의 갯수
var preLastDate = getDate(year, month-1); // 입력받은 달 한달전 date 객체 // 제목 표시
cal_title.innerHTML = year + "年 " + month + "月"; // 요일 출력
var row2 = cal_Table.insertRow();
var w_td;
for( var i=0; i<day_Of_Week.length ;i++ ) {
w_td = row2.insertCell();
w_td.innerHTML = day_Of_Week[i];
w_td.style.textAlign = 'center';
w_td.style.backgroundColor = dayOfWeekBgColor; // w_td.style.borderWidth = '1px'; // <=-- Border부분 지저분해 보여서 지웠음
// w_td.style.borderStyle = 'solid';
// w_td.style.borderColor = '#FFFFFF'; w_td.width = '35';
w_td.height = '25';
} // 날짜 출력
var i_tr; // Temp tr Object
var i_td; // Temp td Object
var tempInt = 1;
var tempInt2 = 1; for( var i=0; i<printRowCnt; i++ ) {
i_tr = cal_Table.insertRow(); for( var j=0; j<7; j++ ) {
// 첫번째 행일때
if( i == 0 && j < currDayOfWeek) {
i_td = i_tr.insertCell();
i_td.innerHTML = preLastDate - currDayOfWeek + j + 1;
i_td.style.color = preDateColor; i_td.id = year + '-' + (month-1) + '-' + (preLastDate - currDayOfWeek + j + 1);
if( month - 1 == 0 ) { i_td.id = (year-1) + '-12-' + (preLastDate - currDayOfWeek + j + 1); }
}
// 마지막 행일때
else if ( i == printRowCnt-1 && tempInt == currLastDate+1 ) {
i_td = i_tr.insertCell();
i_td.innerHTML = tempInt2++;
i_td.style.color = nextDateColor; i_td.id = year + '-' + (month+1) + '-' + (tempInt2-1);
if( month + 1 == 13 ) { i_td.id = (year+1) + '-1-' + (tempInt2-1); }
} // 이것도 저것도 아닐때..
else {
i_td = i_tr.insertCell();
i_td.innerHTML = tempInt++;
i_td.id = year + '-' + month + '-' + (tempInt-1);
if( currYear == year && currMonth == month && tempInt-1 == currDate ) { i_td.style.backgroundColor = 'yellow'; i_td.style.fontWeight = 'bolder'; }
if( j == 0 ) { i_td.style.color=sundayColor; }
if( j == 6 ) { i_td.style.color=saturdayColor; }
} i_td.attachEvent( 'onclick', writeValue );
i_td.attachEvent( 'onmouseover', changeBgColorOver );
i_td.attachEvent( 'onmouseout', changeBgColorOut ); i_td.style.cursor = 'hand';
i_td.style.paddingRight = '10px'
i_td.style.textAlign = 'right';
i_td.width = '35';
i_td.height = '20'; } // for( var j=0; j<7; j++ )
} // for( var i=0; i<printRowCnt ;i++ ) // 창 크기 변환
window.resizeTo( 253, 123+eval(printRowCnt)*20 );
self.focus();
} // 이전년
function to_PreYear() {
year--;
printCal();
} // 이전달
function to_PreMonth() {
month--;
if( month == 0 ) { month = 12; year--; }
printCal();
} // 다음년
function to_NextYear() {
year++;
printCal();
} // 다음달
function to_NextMonth() {
month++;
if( month == 13 ) { month = 1; year++; }
printCal();
} // 마우스 오버시 바탕색 변환
function changeBgColorOver() {
var overObj = window.event.srcElement;
if( overObj.id != (currYear + '-' + currMonth + '-' + currDate) ){ overObj.style.backgroundColor = mouseOverColor; }
// overObj.style.textDecoration = 'underline'; // <=-- UnderLine~
} // 마우스 아웃시 바탕색 변환
function changeBgColorOut() {
var outObj = window.event.srcElement;
if( outObj.id != (currYear + '-' + currMonth + '-' + currDate) ){ outObj.style.backgroundColor = mouseOutColor; }
// outObj.style.textDecoration = 'none'; // <=- UnderLine 취소~
} // 입력
function writeValue() {
var loc = document.location.href;
loc = loc.substring(loc.indexOf("?")+1);
var openerField = eval("opener." + loc); // var w_form = 'a'; // 입력되어질 부모창의 FORM 이름
// var w_input = 'i_a'; // 입력되어질 부모창의 INPUT 이름
// var f_input = 'f_a'; // 입력된 후 FOCUS를 가질 부모창의 INPUT 이름 var idValue = window.event.srcElement.id;
if( window.event.srcElement.name == 'today' ) { idValue = currYear + '-' + currMonth + '-' + currDate; }
if( window.event.srcElement.name == 'none' ) { idValue = ''; }
openerField.value = idValue;
// eval("opener."+w_form+"."+w_input).value = idValue;
// eval("opener."+w_form+"."+f_input).focus();
self.close();
}
</script>
<!------------------------------- script 끝 -------------------------------->
<!------------------------------- calendar.html 끝! --------------------------------------->
|
