아래 소개하고 있는 소스 코드는 스크립트 언어 PHP 또는 자바스크립트를 이용해 달력을 출력하는 비교적 간단한 웹프로그램입니다. 두가지 소스중 하나를 실행 시키면 아래와 같은 이미지 처럼 출력이 됩니다. 달력을 만들기 위해서는 그 달의 첫 날짜와 마지막 날짜를 계산해야 하며 요일에 따라 글자의 색을 변화 시켜 줘야 합니다. 이해를 돕기 위해 되도록 소스 코드를 단순화 시켰으므로 코드를 차근 차근 살펴보면 이해가 되리라 생각됩니다. 달력이 투박해 보인다면 좀더 세련되게 업그레이드 해보세요.^^
[PHP로 달력 만들기 소스 코드]
[자바스크립트로 달력 만들기 소스 코드]
[PHP로 달력 만들기 소스 코드]
<?php
function calendar(){
$year = date("Y");
$month = date("n");
$day = date("d");
$day_max = date("t",mktime(0,0,0,$month,1,$year));
$week_start = date("w",mktime(0,0,0,$month,1,$year));
$i = 0;
$j = 0;
$html = "<div class='calendar_box'><div class='calendar_title B'>".sprintf("%d-%02d-%02d",$year,$month,$day)."</div>";
while ($j<$day_max){
if ($i<$week_start) {
$html .= "<div class='calendar_text'>·</div>";
} else {
if ($i%7==0) $font_color = " RED";
else if ($i%7==6) $font_color = " BLUE";
else $font_color = "";
if ($day == ($j+1)) $font_weight = " B"; else $font_weight = "";
$html .= "<div class='calendar_text$font_color$font_weight'>" . ($j+1) . "</div>";
$j ++;
}
$i ++;
}
while ($i%7!==0){
$html .= "<div class='calendar_text'>·</div>";
$i ++;
}
$html .= "<div class='calendar_tail'></div></div>";
return $html;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {font-family: Verdana, Dotum; line-height:20px;}
.B {font-weight:bold}
.box {width:185px; text-align:center; border:1px solid #dddddd}
.calendar_box {width:175px; padding:5px}
.calendar_text {width:25px; float:left; text-align:center; font-size:12px}
.RED {color:red}
.BLUE {color:blue}
.calendar_title {margin:0px; text-align:center; font-size:12px; background-color:#999999; color:#ffffff}
.calendar_tail {clear:both;}
</style>
<title>PHP로 달력 만들기</title>
</head>
<body>
<div class="box">
<?=calendar();?>
</div>
</body>
</html>
function calendar(){
$year = date("Y");
$month = date("n");
$day = date("d");
$day_max = date("t",mktime(0,0,0,$month,1,$year));
$week_start = date("w",mktime(0,0,0,$month,1,$year));
$i = 0;
$j = 0;
$html = "<div class='calendar_box'><div class='calendar_title B'>".sprintf("%d-%02d-%02d",$year,$month,$day)."</div>";
while ($j<$day_max){
if ($i<$week_start) {
$html .= "<div class='calendar_text'>·</div>";
} else {
if ($i%7==0) $font_color = " RED";
else if ($i%7==6) $font_color = " BLUE";
else $font_color = "";
if ($day == ($j+1)) $font_weight = " B"; else $font_weight = "";
$html .= "<div class='calendar_text$font_color$font_weight'>" . ($j+1) . "</div>";
$j ++;
}
$i ++;
}
while ($i%7!==0){
$html .= "<div class='calendar_text'>·</div>";
$i ++;
}
$html .= "<div class='calendar_tail'></div></div>";
return $html;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {font-family: Verdana, Dotum; line-height:20px;}
.B {font-weight:bold}
.box {width:185px; text-align:center; border:1px solid #dddddd}
.calendar_box {width:175px; padding:5px}
.calendar_text {width:25px; float:left; text-align:center; font-size:12px}
.RED {color:red}
.BLUE {color:blue}
.calendar_title {margin:0px; text-align:center; font-size:12px; background-color:#999999; color:#ffffff}
.calendar_tail {clear:both;}
</style>
<title>PHP로 달력 만들기</title>
</head>
<body>
<div class="box">
<?=calendar();?>
</div>
</body>
</html>
[자바스크립트로 달력 만들기 소스 코드]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>자바스크립트로 달력 만들기</title>
<style>
body {font-family: Verdana, Dotum; line-height:20px;}
.B {font-weight:bold}
.box {width:185px; text-align:center; border:1px solid #dddddd}
.calendar_box {width:175px; padding:5px}
.calendar_text {width:25px; float:left; text-align:center; font-size:12px}
.RED {color:red}
.BLUE {color:blue}
.calendar_title {margin:0px; text-align:center; font-size:12px; background-color:#999999; color:#ffffff}
.calendar_tail {clear:both;}
</style>
<script>
function calendar(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var week_start = new Date(year,month-1,1).getDay();
var day_max = get_day_max(year,month-1);
var i = 0;
var j = 0;
var html = "<div class='calendar_box'><div class='calendar_title B'>" + year + "-" + get_number_str(month) + "-" + get_number_str(day) + "</div>";
while (j < day_max){
if (i < week_start) {
html += "<div class='calendar_text'>·</div>";
} else {
if (i%7==0) font_color = " RED";
else if (i%7==6) font_color = " BLUE";
else font_color = "";
if (day == (j+1)) font_weight = " B"; else font_weight = "";
html += "<div class='calendar_text" + font_color + font_weight + "'>" + (j+1) + "</div>";
j ++;
}
i ++;
}
while (i%7!==0){
html += "<div class='calendar_text'>·</div>";
i ++;
}
html += "<div class='calendar_tail'></div></div>";
return html;
}
function get_day_max(year,month){
var i = 29, cday;
while(i<32){
cday = new Date(year,month,i);
if (cday.getFullYear()!=year || cday.getMonth()!=month) break;
i++;
}
return i-1;
}
function get_number_str(num){
if (num<10) num = '0' + num;
return num;
}
</script>
</head>
<body>
<div class="box">
<script>
d0cument.write(calendar());
</script>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>자바스크립트로 달력 만들기</title>
<style>
body {font-family: Verdana, Dotum; line-height:20px;}
.B {font-weight:bold}
.box {width:185px; text-align:center; border:1px solid #dddddd}
.calendar_box {width:175px; padding:5px}
.calendar_text {width:25px; float:left; text-align:center; font-size:12px}
.RED {color:red}
.BLUE {color:blue}
.calendar_title {margin:0px; text-align:center; font-size:12px; background-color:#999999; color:#ffffff}
.calendar_tail {clear:both;}
</style>
<script>
function calendar(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var week_start = new Date(year,month-1,1).getDay();
var day_max = get_day_max(year,month-1);
var i = 0;
var j = 0;
var html = "<div class='calendar_box'><div class='calendar_title B'>" + year + "-" + get_number_str(month) + "-" + get_number_str(day) + "</div>";
while (j < day_max){
if (i < week_start) {
html += "<div class='calendar_text'>·</div>";
} else {
if (i%7==0) font_color = " RED";
else if (i%7==6) font_color = " BLUE";
else font_color = "";
if (day == (j+1)) font_weight = " B"; else font_weight = "";
html += "<div class='calendar_text" + font_color + font_weight + "'>" + (j+1) + "</div>";
j ++;
}
i ++;
}
while (i%7!==0){
html += "<div class='calendar_text'>·</div>";
i ++;
}
html += "<div class='calendar_tail'></div></div>";
return html;
}
function get_day_max(year,month){
var i = 29, cday;
while(i<32){
cday = new Date(year,month,i);
if (cday.getFullYear()!=year || cday.getMonth()!=month) break;
i++;
}
return i-1;
}
function get_number_str(num){
if (num<10) num = '0' + num;
return num;
}
</script>
</head>
<body>
<div class="box">
<script>
d0cument.write(calendar());
</script>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| Json for C# (0) | 2012.06.29 |
|---|---|
| ASP.NET 프로젝트에 CKEditor, CKFinder 연동 방법 (0) | 2011.07.13 |
| jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 (0) | 2009.04.28 |
| jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판 (0) | 2009.04.28 |
| JavaScript Intellisense Improvements in Visual Studio 2008 (0) | 2009.04.23 |
