最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:

 

一、计算数据

 

1、new一个Calendar类

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
?>
复制代码

 

二、html展示

 

1、休息天的背景色是不同的,不是当前搜索年月的天数字体颜色也是不同的

2、div中做初始化年份与月份的下拉框的操作,并选中当前要搜索的年月

3、数据已计算好,哪个td属于哪个tr也已做好,直接将table打印出来即可

复制代码
  <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>
复制代码

 

三、Calendar类

 

1、threshold方法,生成日历的各个边界值

  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、caculate方法,计算日历的天数与样式

  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、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
     */
    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;
    }
复制代码

 

 

 

demo下载:

http://download.csdn.net/download/loneleaf1/7976323

 

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部