PHP로 달력 만들기 v2
아침에 포스팅한 2011/12/22 – PHP로 달력 만들기 에서
말한 내용을 급하게(?) 수정해서 다시 작업을 했다.
calendar.css
#CalendarBox #calendarTop { position: absolute; top: 19px; left: 16px; width: 196px; height: 26px; }
#CalendarBox #calendarTop .prev_button { position: absolute; top: 4px; left: 45px; width: 5px; height: 10px; cursor: pointer; }
#CalendarBox #calendarTop .next_button { position: absolute; top: 4px; right: 36px; width: 5px; height: 10px; cursor: pointer; }
#CalendarBox #calendarTop .today_button { position: absolute; top: 0; right: 3px; width: 23px; height: 17px; cursor: pointer; }
#CalendarBox #calendarTop #month { position: absolute; top: 2px; left: 50px; width: 105px; text-align: center; font-weight: bold; }
#CalendarBox #calendarTop #month .l_text { color: #000; font-size: 14px; }
#CalendarBox #calendarTop #month .s_text { color: #a6a6a6; font-size: 11px; }
#CalendarBox #Calendar { position: absolute; top: 47px; left: 16px; width: 196px; }
#CalendarBox #Calendar ul { margin: 0; padding: 0; list-style: none; }
#CalendarBox #Calendar li { float: left; width: 28px; }
#CalendarBox #Calendar li.day { height: 11px; padding-top: 2px; text-align: center; font-size: 10px; font-family: Tahomo; color: #000; background: #ededed; }
#CalendarBox #Calendar .sunday { color: #c92727; }
#CalendarBox #Calendar .satday { color: #1f87c7; }
#CalendarBox #Calendar li.date { position: relative; height: 20px; font-weight: bold; font-size: 10px; color: #000; }
#CalendarBox #Calendar li.date div { position: absolute; top: 3px; left: 6px; width: 16px; height: 14px; padding-top: 2px; text-align: center; cursor: pointer; }
#CalendarBox #Calendar li.date div:hover { text-decoration: underline; }
#CalendarBox #Calendar li.date div.selected { color: #fff; background: #ff6d09; }
#CalendarBox #Calendar li.date div.outrange { color: 828282; font-weight: normal; }
calendar.php
$temp = explode(“-“, $date);
$time = strtotime($date);
$first = $temp[0] . “-” . $temp[1] . “-01”;
$str_month = date(“M”, $time);
$week_first = date(“w”, strtotime($first));
$num_month = (int)$temp[1];
$num_year = $temp[0];
$cnt = $day = 0;
$day_id = $temp[0] . “-” . $temp[1];
$prev_month = date(“Y-m-01”, strtotime(“-1 month”, $time));
$next_month = date(“Y-m-01”, strtotime(“+1 month”, $time));
$endday = array(1=>31, 28, 31, 30 , 31, 30, 31, 31, 30 ,31 ,30, 31);
// 윤년 계산 부분이다. 4년에 한번꼴로 2월이 28일이 아닌 29일이 있다.
if( $yyyy%4 == 0 && $yyyy%100 != 0 || $yyyy%400 == 0 )
$endday[2] = 29; // 조건에 적합할 경우 28을 29로 변경
// 이전, 다음 달 시작 날짜
$prev_temp = explode(“-“, $prev_month);
$prev_idx = (int)$prev_temp[1];
$prev_last = $endday[$prev_idx];
$prev_last_date = substr($prev_month, 0, 8) . $prev_last;
$prev_last_time = strtotime($prev_last_date);
$prev_week_last = date(“w”, strtotime($prev_last_date));
$prev_day = date(“d”, strtotime(“-{$prev_week_last} days”, $prev_last_time));
$next_temp = explode(“-“, $next_month);
$next_first_date = $next_month;
$next_week_first = date(“w”, strtotime($next_first_date));
$next_day = 1;
?>
<div id=”calendarTop”>
<div id=”cm_<?=$prev_month?>” class=”prev_button ch_month”><img src=”<?=$g4[admin_img_path]?>/calendar_prev_month.png” alt=”” /></div>
<div id=”month”><span class=”l_text”><?=$num_month?></span> <span class=”s_text”><?=$str_month?>. <?=$num_year?></span></div>
<div id=”cm_<?=$next_month?>” class=”next_button ch_month”><img src=”<?=$g4[admin_img_path]?>/calendar_next_month.png” alt=”” /></div>
<div id=”cm_<?=date(“Y-m-d”)?>” class=”today_button ch_month”><img src=”<?=$g4[admin_img_path]?>/calendar_today.png” alt=”오늘” /></div>
</div>
<div id=”Calendar”>
<ul>
<li class=”day sunday”>S</li>
<li class=”day”>M</li>
<li class=”day”>T</li>
<li class=”day”>W</li>
<li class=”day”>T</li>
<li class=”day”>F</li>
<li class=”day satday”>S</li>
</ul>
<?php
// 지난 달 마지막 날이 토요일 경우
if($prev_week_last == 6) {
echo “<ul>n”;
for($k = 0; $k < 7; $k++) {
$prev_day_id = substr($prev_month, 0, 8) . $prev_day;
if($k == 0) {
echo “<li class=’date’><div id='{$prev_day_id}’ class=’outrange sunday’>$prev_day</div></li>n”;
} else {
echo “<li class=’date’><div id='{$prev_day_id}’ class=’outrange’>$prev_day</div></li>n”;
}
$prev_day++;
}
echo “</ul>n”;
}
// 달력출력
for($i = 0; $i < 6; $i++) {
if($day < $endday[$num_month]) {
echo “<ul>n”;
}
for($k = 0; $k < 7; $k++) {
if($cnt >= $week_first) {
$day++;
$day1 = zerofill($day, 2);
if($day <= $endday[$num_month]) {
if($k == 0) {
echo “<li class=’date’><div id='{$day_id}-$day1′ class=’sunday’>$day</div></li>n”;
} else if($k == 6) {
echo “<li class=’date’><div id='{$day_id}-$day1′ class=’satday’>$day</div></li>n”;
} else {
echo “<li class=’date’><div id='{$day_id}-$day1′>$day</div></li>n”;
}
} else {
// 다음 달 일부
$next_day_id = substr($next_month, 0, 8) . zerofill($next_day, 2);
if($k == 0) {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange sunday’>$next_day</div></li>n”;
} else if($k == 6) {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange satday’>$next_day</div></li>n”;
} else {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange’>$next_day</div></li>n”;
}
$next_day++;
}
} else {
// 이전 달 일부
$prev_day_id = substr($prev_month, 0, 8) . $prev_day;
if($k == 0) {
echo “<li class=’date’><div id='{$prev_day_id}’ class=’outrange sunday’>$prev_day</div></li>n”;
} else {
echo “<li class=’date’><div id='{$prev_day_id}’ class=’outrange’>$prev_day</div></li>n”;
}
$prev_day++;
}
$cnt++;
}
echo “</ul>n”;
if($day >= $endday[$num_month]) {
break;
}
}
// 다음 달 첫날이 일요일 경우
if($next_week_first == 0) {
echo “<ul>n”;
for($k = 0; $k < 7; $k++) {
$next_day_id = substr($next_month, 0, 8) . zerofill($next_day, 2);
if($k == 0) {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange sunday’>$next_day</div></li>n”;
} else if($k == 6) {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange satday’>$next_day</div></li>n”;
} else {
echo “<li class=’date’><div id='{$next_day_id}’ class=’outrange’>$next_day</div></li>n”;
}
$next_day++;
}
echo “</ul>n”;
}
?>
</div>
<script type=”text/javascript”>
var date;
$(function() {
$(‘#Calendar div#<?=$date?>’).addClass(“selected”);
$(‘#Calendar div’).click(function() {
$(‘#Calendar div’).removeClass(“selected”);
$(this).addClass(“selected”);
date = $(this).attr(“id”);
loadMemo(date);
if($(this).hasClass(“outrange”)) {
loadCalendar(date);
}
});
$(‘.ch_month’).click(function() {
date = $(this).attr(“id”).replace(“cm_”, “”);
loadMemo(date);
loadCalendar(date);
});
});
</script>
jQuery load 를 이용해 달력의 내용을 AJAX 방식으로 보여준다. 근데 여전히 변수명 같은 거는 정하기 참 힘들다.