'Calendar'에 해당되는 글 1건
- 2009.05.20 javacript 로 만든 달력 샘플
출처 : daum 지난 경기 보기에서 가져와서 조금 고침.
<html>
<head>
<title>
</title>
</head>
<style type="text/css">
a.topmenus {color:#031d6a;font-size:12px;font-weight:bold;text-decoration:none;}
a.topmenus:link{color:#031d6a;font-size:12px;font-weight:bold;text-decoration:none;}
a.topmenus:visited{color:#031d6a;font-size:12px;font-weight:bold;text-decoration:none}
a.topmenus:active{color:#031d6a;font-size:12px;font-weight:bold;text-decoration:underline}
a.topmenus:hover{color:#031d6a;font-size:12px;font-weight:bold;text-decoration:underline}
#gnb_layer_opacity {position:relative; float:left; background-color:#658cff; filter:alpha(opacity=30); -moz-opacity:0.3; display:none;}
:root .gnb_news_opacity {float:left; top:-72px; left:49px; width:69px; height:28px; z-index:1000;}
:root .gnb_sports_opacity {float:left; top:-72px; left:137px; width:73px; height:28px; z-index:1000;}
:root .gnb_tvnews_opacity {float:left; top:-72px; left:232px; width:113px; height:28px; z-index:1000;}
:root .gnb_sisa_opacity {float:left; top:-72px; left:362px; width:109px; height:28px; z-index:1000;}
:root .gnb_issue_opacity {float:left; top:-72px; left:496px; width:107px; height:28px; z-index:1000;}
:root .gnb_photo_opacity {float:left; top:-72px; left:624px; width:70px; height:28px; z-index:1000;}
:root .gnb_reporter_opacity {float:left; top:-72px; left:713px; width:107px; height:28px; z-index:1000;}
:root .gnb_weather_opacity {float:left; top:-72px; left:842px; width:69px; height:28px; z-index:1000;}
:root .gnb_menu_opacity {position:relative; float:left; margin:0; top:-20px; left:0; width:960px; height:18px; overflow:hidden; display:inline;}
* html .gnb_news_opacity {float:left; top:-76px; left:49px; width:69px; height:28px; z-index:1000;}
* html .gnb_sports_opacity {float:left; top:-76px; left:137px; width:73px; height:28px; z-index:1000;}
* html .gnb_tvnews_opacity {float:left; top:-76px; left:232px; width:113px; height:28px; z-index:1000;}
* html .gnb_sisa_opacity {float:left; top:-76px; left:362px; width:109px; height:28px; z-index:1000;}
* html .gnb_issue_opacity {float:left; top:-76px; left:496px; width:107px; height:28px; z-index:1000;}
* html .gnb_photo_opacity {float:left; top:-76px; left:624px; width:70px; height:28px; z-index:1000;}
* html .gnb_reporter_opacity {float:left; top:-76px; left:713px; width:107px; height:28px; z-index:1000;}
* html .gnb_weather_opacity {float:left; top:-76px; left:842px; width:69px; height:28px; z-index:1000;}
* html .gnb_menu_opacity {position:relative; float:left; margin:0; top:-24px; left:0; width:960px; height:18px; overflow:hidden;}
</style>
<!--달력 -->
<script language="JavaScript" type="text/JavaScript">
//오늘 날짜 설정
datToday = new Date();
//현재 년월일
NowThisYear = datToday.getFullYear();
NowThisMonth = datToday.getMonth()+1;
NowThisDay = datToday.getDate();
//날자를 선택하였을 경우
function doClick(sYear, sMonth, sDay)
{
var broad_dt = sYear + (sMonth<10?'0':'') + sMonth + (sDay<10?'0':'') + sDay;
document.location.href = '/exec/program/prog_main.php?prog_id=01&broad_dt='+broad_dt;
}
//2자리 숫자로 변경
function day2(sd)
{
var intd = new Number();
intd = parseInt(sd);
var str = new String();
if(intd < 10) {
str = "0" + intd;
} else {
str = "" + intd;
}
return str;
}
//년 정보를 콤보 박스로 표시
function getYearinfo(sYear, sMonth)
{
var intYear = new Number();
intYear = parseInt(sYear);
var min = 2000;
var max = (intYear > NowThisYear) ? intYear : NowThisYear;
var str = "<select onChange='ShowCalendar(this.value,"+sMonth+",1); return false;' style='width:70; background-color:#D4E6FD; color:#0958AD; font-weight:bold;'>";
for(var i=min; i<=max; i++) {
if (i == intYear) {
str += "<option value="+i+" selected>"+i+"년</option>";
} else {
str += "<option value="+i+">"+i+"년</option>";
}
}
str += "</select>";
return str;
}
//월 정보를 콤보 박스로 표시
function getMonthinfo(sYear, sMonth)
{
var intMonth = new Number();
intMonth = parseInt(sMonth);
var str = "<select onChange='ShowCalendar("+sYear+",this.value,1); return false;' style='width:55; background-color:#D4E6FD; color:#0958AD; font-weight:bold;'>";
for(var i=1; i<=12; i++) {
if (i == intMonth) {
str += "<option value="+i+" selected>"+i+"월</option>";
} else {
str += "<option value="+i+">"+i+"월</option>";
}
}
str += "</select>";
return str;
}
//달력 표현
function ShowCalendar(sThisYear, sThisMonth, sThisDay)
{
var Months_day = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31)
var Weekday_name = new Array("일", "월", "화", "수", "목", "금", "토");
var intThisYear = new Number(), intThisMonth = new Number(), intThisDay = new Number();
intThisYear = parseInt(sThisYear);
intThisMonth = parseInt(sThisMonth);
intThisDay = parseInt(sThisDay);
//값이 없을 경우
if(intThisYear == 0) intThisYear = datToday.getFullYear();
if(intThisMonth == 0) intThisMonth = datToday.getMonth()+1; // 월 값은 실제값 보다 -1 한 값임.
if(intThisDay == 0) intThisDay = datToday.getDate();
//윤년 처리
if((intThisYear % 4)==0) {
if((intThisYear % 100) == 0) {
if((intThisYear % 400) == 0) {
Months_day[2] = 29;
}
} else {
Months_day[2] = 29;
}
}
//이전.후 년월 설정 (화살표 이동)
switch(intThisMonth) {
case 1:
intPrevYear = intThisYear -1;
intPrevMonth = 12;
intNextYear = intThisYear;
intNextMonth = 2;
break;
case 12:
intPrevYear = intThisYear;
intPrevMonth = 11;
intNextYear = intThisYear + 1;
intNextMonth = 1;
break;
default:
intPrevYear = intThisYear;
intPrevMonth = intThisMonth - 1;
intNextYear = intThisYear;
intNextMonth = intThisMonth + 1;
break;
}
//호출날짜 객체 생성
datThisDay = new Date(intThisYear, intThisMonth, intThisDay);
//호출날짜의 요일
intThisWeekday = datThisDay.getDay();
//호출날짜의 요일명
varThisWeekday = Weekday_name[intThisWeekday];
//호출날짜의 마지막일자
intLastDay = Months_day[intThisMonth];
//호출날짜의 월의 1일로 날짜 객체 생성(월은 0부터 11까지의 정수(1월부터 12월))
datFirstDay = new Date(intThisYear, intThisMonth-1, 1);
//호출날짜의 달 1일의 요일을 구함 (0:일요일, 1:월요일)
intFirstWeekday = datFirstDay.getDay();
//노출 처리용
intThirdWeekday = intFirstWeekday; //요일
thirdPrintDay = 1; //일
Stop_flag = 0;
Cal_HTML = "<table border='0' cellspacing='0' cellpadding='0' style='margin-top:2'>";
Cal_HTML += "<tr>";
Cal_HTML += "<td><img onClick='ShowCalendar("+intPrevYear+","+intPrevMonth+",1);' alt='"+intPrevYear+"-"+intPrevMonth+"' src='http://newsimg.kbs.co.kr/images/200602/common/b_back.gif' align=absmiddle></td>";
Cal_HTML += "<td style='color:#8D6A0A; padding-left:8'>"+getYearinfo(intThisYear,intThisMonth)+"</td>";
Cal_HTML += "<td style='color:#8D6A0A; padding-left:8'>"+getMonthinfo(intThisYear,intThisMonth)+"</td>";
Cal_HTML += "<td style='padding-left:8'><img onClick='ShowCalendar("+intNextYear+","+intNextMonth+",1);' alt='"+intNextYear+"-"+intNextMonth+"' src='http://newsimg.kbs.co.kr/images/200602/common/b_front.gif' align=absmiddle></td>";
Cal_HTML += "</tr>";
Cal_HTML += "</table>\n";
Cal_HTML += "<table border='0' cellspacing='0' cellpadding='0' style='margin-top:2;'>";
Cal_HTML += "<tr height=24 align=center>";
Cal_HTML += "<td width=27 style='color:red;'>일</td>";
Cal_HTML += "<td width=27 style='color:green;'>월</td>";
Cal_HTML += "<td width=27 style='color:green;'>화</td>";
Cal_HTML += "<td width=27 style='color:green;'>수</td>";
Cal_HTML += "<td width=27 style='color:green;'>목</td>";
Cal_HTML += "<td width=27 style='color:green;'>금</td>";
Cal_HTML += "<td width=27 style='color:blue;'>토</td>";
Cal_HTML += "</tr>\n";
for(intLoopWeek=1; intLoopWeek<7; intLoopWeek++) { // 주단위 루프 시작, 최대 6주
if(Stop_flag==1) { break; }
Cal_HTML += "<tr height=20 align=center>"
for(intLoopDay=1; intLoopDay<=7; intLoopDay++) { // 요일단위 루프 시작, 일요일 부터
//월의 first day의 요일 위치
if(intThirdWeekday > 0) {
Cal_HTML += "<td width=27></td>";
intThirdWeekday--;
continue;
}
//월의 last day의 요일 위치
if(thirdPrintDay > intLastDay) {
Cal_HTML += "<td width=27></td>";
continue;
}
Cal_HTML += "<td width=27 title='"+intThisYear+"-"+day2(intThisMonth).toString()+"-"+day2(thirdPrintDay).toString()+"'";
Cal_HTML += "><a href='javascript:doClick("+intThisYear+","+intThisMonth+","+thirdPrintDay+");'"
switch(intLoopDay) {
case 1: // 일요일
Cal_HTML += " style='color:red;'"
break;
case 7: // 토요일
Cal_HTML += " style='color:blue;'"
break;
default: // 평일
Cal_HTML += " style='color:black;'"
break;
}
//오늘인가?
if(intThisYear == NowThisYear && intThisMonth==NowThisMonth && thirdPrintDay==NowThisDay) {
Cal_HTML += "><b>"+thirdPrintDay+"</b></a>";
} else {
Cal_HTML += ">"+thirdPrintDay+"</a>";
}
thirdPrintDay++;
Cal_HTML += "</td>";
// 만약 날짜 값이 월말 값보다 크면 루프문 탈출
if(thirdPrintDay > intLastDay) {
Stop_flag = 1;
}
}
Cal_HTML += "</tr>\n";
}
Cal_HTML += "</table>\n";
document.all.minical.innerHTML = "";
document.all.minical.innerHTML = Cal_HTML;
//for debug
//document.all.source.value = Cal_HTML;
}
</script>
</body>
<body>
<table width="215" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #9FC8FD">
<tr><td style="padding:0 5 4 3; border:1px solid #E0ECFC; background-color:#D4E6FD"><center>달 력</center>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #659BE0">
<tr><td align="center" valign="top" style="padding:7 12 7 12; background-color:#FFFFFF">
<div id="minical"></div>
</td></tr>
</table>
</td></tr>
</table>
<script language="JavaScript" type="text/JavaScript">ShowCalendar(2009,5,15);</script>
<!--/달력 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td height="10"></td></tr></table>
</body>
</html>
Prev
Rss Feed