최근 프로젝트에서는 데이터를 달력에 표시해야 했습니다. 인터넷에는 많은 JS 플러그인이 있지만 나중에 더 효과적으로 제어하기 위해 달력 표시를 직접 만들기로 결정했습니다. 아래와 같이:
1. 계산된 데이터
1. 새 캘린더 클래스 만들기
2. 두 개의 드롭다운 상자(연도 및 월)에서 데이터를 초기화합니다
3. 검색할 연도와 월을 초기화합니다
4. CSS 및 일수를 포함하여 달력에서 매일의 데이터 정보를 계산합니다
<?php require_once 'calendar.php'; $util = new Calendar(); $years = array(2012, 2013, 2014, 2015, 2016);//年份选择自定义 $months = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);//月份数组 //获取post的年份数据 if(empty($_POST['ddlYear'])) { $year = date('Y'); }else { $year = $_POST['ddlYear']; } //获取post的月份数据 if(empty($_POST['ddlMonth'])) { $month = date('n'); }else { $month = $_POST['ddlMonth']; } $calendar = $util->threshold($year, $month);//获取各个边界值 $caculate = $util->caculate($calendar);//计算日历的天数与样式 $draws = $util->draw($caculate);//画表格,设置table中的tr与td ?>
2. HTML 표시
1. 쉬는 날의 배경색이 다르며, 현재 검색된 연월이 아닌 날의 글꼴 색도 다릅니다
2. div에서 연월 드롭다운 박스를 초기화하고 현재 검색할 연월을 선택합니다
3. 데이터가 계산되었으며 어떤 td가 어떤 tr에 속하는지 테이블을 인쇄할 수 있습니다
<div style="padding:20px"> <select name="ddlYear"> <?php foreach($years as $data) {?> <option value="<?php echo $data?>" <?php if($year == $data) echo 'selected="selected"'?>><?php echo $data?></option> <?php }?> </select> <select name="ddlMonth"> <?php foreach($months as $data) {?> <option value="<?php echo $data?>" <?php if($month == $data) echo 'selected="selected"'?>><?php echo $data?></option> <?php }?> </select> <input type="submit" value="修改"/> </div> <table width="100%" cellspacing="0" class="table_calendar"> <thead class="f14"> <tr> <td width="16%">日</td> <td width="14%">一</td> <td width="14%">二</td> <td width="14%">三</td> <td width="14%">四</td> <td width="14%">五</td> <td width="14%">六</td> </tr> </thead> <tbody class="f14"> <?php foreach($draws as $draw) {?> <tr> <?php foreach($draw as $date) {?> <td class="<?php echo $date['tdclass']?>"> <p class="<?php echo $date['pclass']?>"><?php echo $date['day']?></p> </td> <?php }?> </tr> <?php }?> </tbody> </table>
3. 캘린더 수업
1. 임계값 방식, 달력의 각 경계값을 생성합니다
1) 이번 달의 총 일수 계산
2) 이번 달의 첫날과 마지막 날을 계산하고, 각각이 무슨 요일인지 계산하세요
3) 달력에서 첫 번째 날짜와 마지막 날짜를 계산합니다
/** * @deprecated 生成日历的各个边界值 * @param string $year * @param string $month * @return array */ function threshold($year, $month) { $firstDay = mktime(0, 0, 0, $month, 1, $year); $lastDay = strtotime('+1 month -1 day', $firstDay); //取得天数 $days = date("t", $firstDay); //取得第一天是星期几 $firstDayOfWeek = date("N", $firstDay); //获得最后一天是星期几 $lastDayOfWeek = date('N', $lastDay); //上一个月最后一天 $lastMonthDate = strtotime('-1 day', $firstDay); $lastMonthOfLastDay = date('d', $lastMonthDate); //下一个月第一天 $nextMonthDate = strtotime('+1 day', $lastDay); $nextMonthOfFirstDay = strtotime('+1 day', $lastDay); //日历的第一个日期 if($firstDayOfWeek == 7) $firstDate = $firstDay; else $firstDate = strtotime('-'. $firstDayOfWeek .' day', $firstDay); //日历的最后一个日期 if($lastDayOfWeek == 6) $lastDate = $lastDay; elseif($lastDayOfWeek == 7) $lastDate = strtotime('+6 day', $lastDay); else $lastDate = strtotime('+'.(6-$lastDayOfWeek).' day', $lastDay); return array( 'days' => $days, 'firstDayOfWeek' => $firstDayOfWeek, 'lastDayOfWeek' => $lastDayOfWeek, 'lastMonthOfLastDay' => $lastMonthOfLastDay, 'firstDate' => $firstDate, 'lastDate' => $lastDate, 'year' => $year, 'month' => $month ); }
2. 계산 방법, 달력의 일수 및 스타일 계산
1) 지난 달의 일수를 계산합니다. 매월 1일이 일요일이 아닌 경우에는 지난 달의 마지막 날을 기준으로 계산해야 합니다.
2) 이번 달의 일수를 순회하고, 휴일인 경우 특수 CSS 스타일을 추가합니다
3) 일요일, 토요일, 근무일 세 가지 상황으로 나누어 다음 달의 일수를 계산합니다
/** * @author Pwstrick * @param array $calendar 通过threshold方法计算后的数据 * @deprecated 计算日历的天数与样式 */ function caculate($calendar) { $days = $calendar['days']; $firstDayOfWeek = $calendar['firstDayOfWeek'];//本月第一天的星期 $lastDayOfWeek = $calendar['lastDayOfWeek'];//本月最后一天的星期 $lastMonthOfLastDay = $calendar['lastMonthOfLastDay'];//上个月的最后一天 $year = $calendar['year']; $month = $calendar['month']; $dates = array(); if($firstDayOfWeek != 7) { $lastDays = array(); $current = $lastMonthOfLastDay;//上个月的最后一天 for ($i = 0; $i < $firstDayOfWeek; $i++) { array_push($lastDays, $current);//添加上一个月的日期天数 $current--; } $lastDays = array_reverse($lastDays);//反序 foreach ($lastDays as $index => $day) { array_push($dates, array('day' => $day, 'tdclass' => ($index ==0 ?'rest':''), 'pclass' => 'outter')); } } //本月日历信息 for ($i = 1; $i <= $days; $i++) { $isRest = $this->_checkIsRest($year, $month, $i); //判断是否是休息天 array_push($dates, array('day' => $i, 'tdclass' => ($isRest ?'rest':''), 'pclass' => '')); } //下月日历信息 if($lastDayOfWeek == 7) {//最后一天是星期日 $length = 6; } elseif($lastDayOfWeek == 6) {//最后一天是星期六 $length = 0; }else { $length = 6 - $lastDayOfWeek; } for ($i = 1; $i <= $length; $i++) { array_push($dates, array('day' => $i, 'tdclass' => ($i==$length ?'rest':''), 'pclass' => 'outter')); } return $dates; }
3. 그리기 방법, 테이블 그리기, 테이블에 tr 및 td 설정
1) 데이터는 테이블 태그를 사용하여 표시되므로 각 tr 아래의 td를 정렬해야 합니다
2)$index % 7 == 0 테이블 각 행의 첫 번째 열 계산
3)$index % 7 == 6 || $index == ($length-1) 각 행의 마지막 열 또는 $caculate의 마지막 데이터를 계산합니다
4) 각 행의 배열인 $tr에 중간 행을 추가합니다
/** * @author Pwstrick * @param array $caculate 通过caculate方法计算后的数据 * @deprecated 画表格,设置table中的tr与td */ function draw($caculate) { $tr = array(); $length = count($caculate); $result = array(); foreach ($caculate as $index => $date) { if($index % 7 == 0) {//第一列 $tr = array($date); }elseif($index % 7 == 6 || $index == ($length-1)) { array_push($tr, $date); array_push($result, $tr);//添加到返回的数据中 $tr = array();//清空数组列表 }else { array_push($tr, $date); } } return $result; }
이번 글을 통해 달력 만드는 방법을 알려드렸으니, 다리미가 뜨거울 때 두드려 나만의 달력을 만들어 보세요.
소스코드 첨부: 간단한 PHP 달력 만드는 법을 가르쳐주세요