发表时间:2015-11-18 14:04作者:zhao人气:更新时间:2025-10-17 20:50:55
最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:

一、计算数据
1、new一个Calendar类
2、初始化两个下拉框中的数据,年份与月份
3、初始化要搜索的年份和月份
4、计算得出日历中每一天的数据信息,包括css、天数
| <?php require_once'calendar.php'; $util= newCalendar(); $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?> | 
二、html展示
1、休息天的背景色是不同的,不是当前搜索年月的天数字体颜色也是不同的
2、div中做初始化年份与月份的下拉框的操作,并选中当前要搜索的年月
3、数据已计算好,哪个td属于哪个tr也已做好,直接将table打印出来即可
| <div style="padding:20px">  <select name="ddlYear">  <?php foreach($yearsas$data) {?>   <option value="<?php echo $data?>"<?php if($year== $data) echo'selected="selected"'?>><?php echo$data?></option>  <?php }?>  </select>  <select name="ddlMonth">  <?php foreach($monthsas$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($drawsas$draw) {?>    <tr>    <?php foreach($drawas$date) {?>     <td class="<?php echo $date['tdclass']?>">      <p class="<?php echo $date['pclass']?>"><?php echo$date['day']?></p>     </td>    <?php }?>     </tr>   <?php }?>  </tbody> </table> | 
三、Calendar类 
1、threshold方法,生成日历的各个边界值
1)计算这个月总天数
2)计算这个月第一天与最后一天,各是星期几
  3)计算日历中的第一个日期与最后一个日期
| /**  * @deprecated 生成日历的各个边界值  * @param string $year  * @param string $month  * @return array  */ functionthreshold($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);    returnarray(    'days'=> $days,     'firstDayOfWeek'=> $firstDayOfWeek,     'lastDayOfWeek'=> $lastDayOfWeek,    'lastMonthOfLastDay'=> $lastMonthOfLastDay,    'firstDate'=> $firstDate,    'lastDate'=> $lastDate,    'year'=> $year,    'month'=> $month  ); } | 
2、caculate方法,计算日历的天数与样式
1)将上个月的天数计算出来,本月第一天的星期不是星期天的话,就需要根据上个月的最后一天计算
2)将本月的天数遍历出来,如果是休息天就加上特殊的css样式
  3)将下个月的天数计算出来,分三种情况,星期日、星期六和工作日
| /**  * @author Pwstrick   * @param array $calendar 通过threshold方法计算后的数据  * @deprecated 计算日历的天数与样式  */ functioncaculate($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($lastDaysas$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、draw方法,画表格,设置table中的tr与td
1)数据将要用table标签来显示,所以这里要将各个tr下面的td排列好
2)$index % 7 == 0 计算表格每行的第一列
3)$index % 7 == 6 || $index == ($length-1) 计算每行的最后一列,或$caculate的最后一个数据
4)将中间行添加到$tr中,就是每一行的array
| /** * @author Pwstrick * @param array $caculate 通过caculate方法计算后的数据 * @deprecated 画表格,设置table中的tr与td */functiondraw($caculate) { $tr= array(); $length= count($caculate); $result= array(); foreach($caculateas$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;} | 
通过本文大家应该知道日历制作的方法了,那就趁热打铁,做一个属于自己日历。
网友评论