자바 스크립으로 달력 만들기 예제
유용한것 같아서 다른 곳에서 퍼 왔습니다.
총 2개 입니다. 하나는 보이는 화면에 있는 것이고, 다른 하나는 첨부파일로 되어 있습니다.
dateCalendar.js
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html lang="ko">
<head>
<title>Trio 홈페이지 - 달력 만들기 예제 - Javascript 예제</title>
<meta http-ｅquiv="Content-Type" CONTENT="text/html; charset=EUC-KR">
<meta name="keywords" content="javascript,js,...">
<script Language="Javascript" src="../../pub/pubcss.js"></script>
<script Language="Javascript">basicset(2,'std')</script>
<script Language="Javascript">
<!-- 감춤
function calendar(){
monthdays='312831303130313130313031'
weekdays='일월화수목금토'
now=new Date(); // 현재 일자, 시간
day=now.getDate(); // 일자
wkdy=now.getDay(); // 요일 (0=월요일, 1=화요일, ...)
month=now.getMonth(); // 월 (0=1월, 2월=1, ....)
year=now.getYear(); // 년
startday=now // 현재 일자, 시간 복사
startday.setDate(1); // 복사된 일자, 시간에 일자를 1일로 설정
wkdy1=startday.getDay(); // 1일의 요일은 얻음
monthEnd=monthdays.substring((month*2),(month*2+2)) // 두자리씩 끊어 월 길이로
if ((month==1)&& // 월이 2월(1)이며,
(((year %4==0)&&(year %100 !=0)) // (4와 100으로 나눠 나머지가 없거나
|| (year % 400 ==0 ))) monthEnd=29; // 400으로 나눠 나머지가 없으면) 29
document.writｅ('<tr align=center><td colspan=7 class=week>');
document.writｅ('<font size=4 color=880000><b>');
document.writｅ(year+' 년 '+(month+1)+' 월</b>'); // 월은 month+1
document.writｅ('</font></td></tr><tr>')
for (i=0;i<=6;i++){ // 각 요일의 칸을 만듬
document.writｅ('<td class=week>'+
((i==0)?'<font color=red>':'')+ // 첫칸(0)이면 폰트색 red 아니면 null('')
weekdays.substring(i,i+1)+ // weekdays에서 1자씩 끊어 요일 표시
'</td>');
}
document.writｅ('</tr><tr align=center>'); // 요일 컬럼 닫고 일자 컬럼 열기
column=0; // 컬럼을 첫째칸으로 설정
for (i=0;wkdy1>i;i++){ // 일자를 월초(1일) 요일 전까지 반복
document.writｅ('<td> </td>'); // 빈칸 만들기
column++; // 컬럼 1 증가
}
for ( i=1; i<=monthEnd; i++){ // 일자 칸 1 부터 월 길이까지 반복
document.writｅ(
'<td class='+ // 칸 시작
((i==day) ? 'today' : // 일자가 오늘과 같으면 class=today
((column==0) ? 'sun' : // 아니고 (0번 컬럼이면 class=sun
((column==6) ? 'sat' : // 아니고 (6번 컬럼이면 class=sat
'normal')))+ // 아니면 class=normal)
'>'+i+'</td>'); // 일자 넣고 칸마감
column++; // 컬럼 1 증가
if(column==7){ // 컬럼이 7이면 그 줄 끝내고 새줄 열기
document.writｅ('</tr><tr>');
column=0; // 컬럼을 첫째칸으로 설정
}
} // for loop 종료
for (i=column;i<=6;i++){ // 종료된 컬럼에서 마지막 컬럼까지 빈칸 넣기
document.writｅ('<td> </td>');
}
document.writｅ('</tr></table>'); // 줄 마감
document.writｅ('<table align=center><tr><td class=bottom>'+
'<font size=2>오늘은 <b>'+year+'</b> 년 <b>'+(month+1)+'</b> 월<b>'+
day+'</b> 일 <b>'+
((wkdy==0) ? '즐거운 <font color=red>' : '')+
weekdays.substring(wkdy,wkdy+1)+'</b>요일</font></td></tr>');
}
// 감춤 끝 -->
</script>
<style type="text/css">
td.today {
color: red; font-weight:bold;
background-color:fe8;
border:solid thin 1pt; border-color:#fff #f00 #f00 #fff;
}
td.normal{
color: #088; font-weight:bold;
background-color:eeddff;
border:solid thin 1pt; border-color:#eef #88c #88c #eef;
}
td.sun{
color: #880000; font-weight:bold;
background-color:ffeedd;
border:solid thin 1pt; border-color:#fee #c88 #c88 #fee;
}
td.sat{
color: #088; font-weight:bold;
background-color:f8d8ee;
border:solid thin 1pt; border-color:#fee #c88 #c88 #fee;
}
td.week{
color: #008; font-weight:bold;
background-color:eee;
border:solid thin 1pt; border-color:#fff #ccc #ccc #fff;
}
td.bottom{
color: #066; background-color:eeeeee;
border:solid thin 1pt; border-color:#fff #ccc #ccc #fff;
}
</style>
</head>
<body>
<a name="top"></a>
<center>
<table width=100% border=1><tr align=center>
<td width=30 class=heada><a href="http://trio.co.kr/"
target="_top"><img src="../../gif/ictrio.gif" border=0
alt="Trio 홈페이지"></a></td>
<td class=head></span>달력 만들기 예제</td>
<td align=right width=30 class=heada><a href="../js/jxexp.html"
target=main><img src="../../gif/arexp.gif" border=0 width=30
alt="Javascript 예제 메인페이지"></a></td></tr></table>
<table class=main><tr><td>
<img src=../gif/rfbtexm2.gif><br>
<table align=center border=1 cellspacing=3 bgcolor=ddeeff class=calendar
style="border:solid thin 2pt; border-color: #eff #88f #88f #eef;">
<script>calendar();</script>
</td></tr></table>
<hr class="bara">
<pre class=teal>
<img src="../gif/rfcoding.gif" border=0 alt="HTML Code"><br>
이부분의 코드부분으로 중복되므로 생략
</pre>
</td></tr></table>
<hr class="bara">
<div class=blockdown style="border-width:1.5pt;">
<div class=box><table width=95%>
<tr align="center" valign="middle">
<td><a href="http://trio.co.kr/" target="_top"><img
src="http://trio.co.kr/gif/ictrio.gif" border=0
height=20 alt="번역문 소유자 - Trio 홈페이지"></a> 제공</td>
<td class="linkok">
이 문서(http://trio.co.kr/webrefer/jsex/xcondi.html)는<br>
자유로이 연결 사용이 가능함.</td>
<td align=right width=32><a href="../js/jxexp.html"><img
src="../../gif/arexp.gif" border=0 height=30
alt="예제 메뉴로"></a>
</td></tr></table></div></div>
</center>
<a name="bottom"></a>
</body>
</html>