基于ThinkPHP实现的日历功能实例详解

时间:2022-11-27 16:46:49

本文实例讲述了基于thinkphp实现的日历功能。分享给大家供大家参考,具体如下:

开发环境介绍

最新,闲来没事,便开发了一款简单的日历,来统计工作情况。为了开发便捷,使用thinkphp架构。界面如下图

基于ThinkPHP实现的日历功能实例详解

备注:每页包含上一个月,当前月,下一个月的日期,并用不同的颜色区分,如果某天工作了,便圈出来。
主要是以下两个文件

重要文件描述

功能文件

基于ThinkPHP实现的日历功能实例详解

calendar.class.php主要负责,获取日历详细信息的,不涉及用户数据操作。

代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?php
namespace util;
class calendar{
  //上一个月信息
  private $lastyear=null;
  private $lastmonth=null;
  //当前月信息
  private $curyear=null;
  private $curmonth=null;
  private $curwek=null;
  private $curday=null;
  private $curdaysum=0;
  //下一个月月信息
  private $nextyear=null; //下一个月是哪一年
  private $nextmonth=null;//下一个月
  private $calendar=null;
  public function __construct($datetime=null){
    if(isset($_get['yeal']) && is_numeric($_get['yeal'])){
      $this->curyear=$_get['yeal'];
    }else{
      $this->curyear=date('y');
    }
    if(isset($_get['month']) && is_numeric($_get['month'])){
      $this->curmonth=$_get['month'];
    }else{
      $this->curmonth=date('n');
    }
    if(isset($_get['day']) && is_numeric($_get['day'])){
      $this->curday=$_get['day'];
    }else{
      $this->curday=date('j');
    }
    $this->init($datetime);
    $this->createcalendar();
  }
  /**
  *初始化
  */
  public function init($datetime=null){
    if(!empty($datetime)){ //当月
      $this->curyear=date('y',strtotime($datetime));
      $this->curmonth=date('n',strtotime($datetime));
      $this->curday=date('j',strtotime($datetime));
    }
    $this->curwek=date('w',strtotime($this->curyear.'-'.$this->curmonth.'-1'));
    //上一个月
    $this->lastmonth=$this->curmonth-1; //上一个月
    $this->lastyear=$this->curyear; //上一个月属于哪一年
    if($this->lastmonth<0){
      $this->lastmonth=12;
      $this->lastyear-=1;
    }
    //下一个月
    $this->nextmonth=$this->curmonth+1;//下一个月
    $this->nextyear=$this->curyear; //下一个月属于哪一年
    if($this->nextmonth > 12){
      $this->nextmonth=1;
      $this->nextyear+=1;
    }
  }
  public function getcalendar(){
    return $this->calendar;
  }
  /**
  *创建日历从周日 周一 周二 周三 周四 周五 周六,7*5方格,前面补上月后几天,后面补下月开始几天
  **/
  public function createcalendar(){
    //判断当月共计多少天
    $nextstr=$this->nextyear.'-'.$this->nextmonth.'-1 -1 days';
    $curdaysum=date('j',strtotime($nextstr));
    //判断上一个月最后一天是多少号
    $laststr=$this->curyear.'-'.$this->curmonth.'-1 -1 days';
    $lastdaysum=date('j',strtotime($laststr));
    $prefixlid=$this->lastyear.'-'.$this->lastmonth;
    $prefixcid=$this->curyear.'-'.$this->curmonth;
    $prefixnid=$this->nextyear.'-'.$this->nextmonth;
    if($this->curwek == 0){
      $lastmonthsum=7; //需要添加上个月的$lastmonthsum天
    }else{
      $lastmonthsum=$this->curwek;
    }
    $lastmonthstart=$lastdaysum - $lastmonthsum+1;
    for($i=0,$j=1,$k=1;$i<42;$i++){
      $dateinfo=array();
      if($i<$lastmonthsum){ //上一个月
        $dateinfo['day']=$lastmonthstart + $i;
        $dateinfo['type']=1;
        $id=$prefixlid.'-'.$dateinfo['day'];
        $this->calendar[]=array('id'=>$id,
                    'info'=>$dateinfo);
      }else if($j > $curdaysum){//下一个月
        $id=$prefixnid.'-'.$k;
        $dateinfo['day']=$k;
        $dateinfo['type']=3;
        $this->calendar[]=array('id'=>$id,
                    'info'=>$dateinfo);
        $k++;
      }else{//本月
        $dateinfo['day']=$j;
        $dateinfo['type']=2;
        $this->calendar[]=array('id'=>($prefixcid.'-'.$j),
                    'info'=>$dateinfo);
        $j++;
        $this->curdaysum+=1;
      }
    }
  }
  public function getdaytime(){
    return $this->curyear.'-'.$this->curmonth.'-'.$this->curday;
  }
  /**
  *获取当前月属于哪个月
  **/
  public function getcurmonth(){
    return $this->curyear.'-'.$this->curmonth;
  }
  /**
  *获取上一个月属于哪个月
  **/
  public function getlastmonth(){
    return $this->lastyear.'-'.$this->lastmonth;
  }
  /**
  *获取下一个月属于哪个月
  **/
  public function getnextmonth(){
    return $this->nextyear.'-'.$this->nextmonth;
  }
  /**
  *判断当前月有多少天
  **/
  public function getcurdaysum(){
    return $this->curdaysum;
  }
}

worklog.class.php文件,主要负责将用户工作信息与日历信息结合起来。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<?php
namespace util;
class worklog{
  private $uid;//用户id
  private $calendar;//日历对象
  private $lastmonth;//上一个月
  private $curmonth; //本月
  private $nextmonth;//下一个月
  private $monthworkeddays;//当月工作的天数
  private $worklog=null;//当前月的工作日历
  public function __construct($uid=0,$daytime=null){
    $this->uid=$uid;
    $this->calendar=new \util\calendar($daytime);
    $this->lastmonth=$this->calendar->getlastmonth();
    $this->curmonth=$this->calendar->getcurmonth();
    $this->nextmonth=$this->calendar->getnextmonth();
    $this->init();
  }
  public function init(){
    $info=$this->calendar->getcalendar();
    $userlog=array();
    if($this->uid !=0){
      $lastmonth=explode('-', $this->lastmonth);
      $curmonth=explode('-', $this->curmonth);
      $nextmonth=explode('-', $this->nextmonth);
      //获取上一个月,当前月,下一个月的工作日志,后期使用缓存
      $where='uid='.$this->uid.' and ((`year`='.$lastmonth[0].' and `month`='.$lastmonth[1].' ) or (`year`='.$curmonth[0].' and `month`='.$curmonth[1].' ) or (`year`='.$nextmonth[0].' and `month`='.$nextmonth[1].' ))';
      $rs=m('work_log')->field('year,month,day,status')->where($where)->select();
      foreach ($rs as $value) {
        $userlog[$value['year'].'-'.$value['month'].'-'.$value['day']]=$value['status'];
      }
    }
    $flag=1;
    foreach ($info as $key=>$value) {
      if($flag % 7 ==1 || $flag % 7 ==0){
        $cellbgtype=3;//没有工作
      }else{
        $cellbgtype=1;//没有工作
      }
      if(isset($userlog[$value['id']]) && $userlog[$value['id']] ==1){
        //判断是不是当前月份
        $str=date('y-n',strtotime($value['id']));
        if($this->curmonth == $str){
          $this->monthworkeddays+=1;
        }
        $cellbgtype+=1;
      }
      $cellbgtype='daytype'.$cellbgtype.'_'.$value['info']['type'];
      $info[$key]['info']['class']=$cellbgtype;
      $flag++;
    }
    $this->worklog=$info;
  }
  public function getlastmonth(){
    return $this->lastmonth;
  }
  public function getcurmonth(){
    return $this->curmonth;
  }
  public function getnextmonth(){
    return $this->nextmonth;
  }
  /**
  *当月已经工作的天数
  */
  public function monthworkeddays(){
    return $this->monthworkeddays;
  }
  /**
  *当月的天数
  **/
  public function monthdays(){
    return $this->calendar->getcurdaysum();
  }
  /**
  *获取累计工作的天数
  **/
  public function workeddays(){
  }
  /**
  *当前工作日历的月份
  **/
  public function logmonth(){
  }
  /**
  *当月截止到目前可得薪水
  **/
  public function hadsalary(){
  }
  /**
  *预计可得最高薪水
  **/
  public function maxsalary(){
  }
  /**
  *当前的工作日历
  **/
  public function workinfo(){
    return $this->worklog;
  }
}

调用文件

indexcontroller.class.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
namespace home\controller;
use think\controller;
class indexcontroller extends controller {
  public function index(){
   $uid=1;
   $daytime=i('daytime');
   if(!empty($daytime)){
    $daytime=date('y-m-d',$daytime);
   }
   $worklog=new \util\worklog($uid,$daytime);
   $curday=$worklog->getcurmonth();
   $lastmday=strtotime($curday.' -1 month');
   $nextmday=strtotime($curday.' +1 month');
   $nowtime=date('当前时间:y年m月d号 h:i:s');
   $curdaystr=date('日历时间:y年m月d号',strtotime($curday));
   $info=$worklog->workinfo();
   $curdaysum=$worklog->monthdays();
   $workdays=$worklog->monthworkeddays();
   $this->assign('lastmday',$lastmday);
   $this->assign('nextmday',$nextmday);
   $this->assign('nowtime',$nowtime);
   $this->assign('curday',$curdaystr);
   $this->assign('info',$info);
   $this->assign('curdaysum',$curdaysum);
   $this->assign('workdays',$workdays);
   $this->display();
  }
}

显示文件

index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<extend name="public/base" />
<block name="css">
<style type="text/css">
  *{margin: 0; padding: 0; border: 0; font-size: 16px;}
  body{background-color: #4d56a3;}
  ul{list-style: none;}
  #mainbox{width: 1024px; height:auto; margin:10px auto 0 auto; }
  #leftbox{width:60%; height: 700px; float: left; border-radius:15px; margin-right:3%;  background-color:#ffbd66; }
  #rightbox{width:37%; height: 700px; float: right; border-radius:15px; background-color:#faf7dd}
  #calendartitle{width: 95%; margin: 10px auto 5px auto; height: 110px; }
  #calendartitle ul li{float: left; margin-right: 10px;}
  #logoimg{width: 100px; height: 100px; border-radius: 10px; background-image: url('__img__/logo.png');background-repeat: no-repeat;}
  #cellhead{width: 95%; background-color:#ffe786; border-radius:10px 10px 0 0; }
  #cellhead td{width:80px; height:45px; font-size: 22px; }
  #calendarcell{width: 95%; margin: 0 auto;}
  #calendartable td{width:80px; height:80px;background-repeat: no-repeat; border: 1px; font-size: 18px; }
  .daytype1_1{background-image:url("__img__/cellbg1_0_1.png");}
  .daytype2_1{background-image:url("__img__/cellbg1_1_1.png");}
  .daytype1_2{background-image:url("__img__/cellbg1_0_2.png");}
  .daytype2_2{background-image:url("__img__/cellbg1_1_2.png");}
  .daytype1_3{background-image:url("__img__/cellbg1_0_3.png");}
  .daytype2_3{background-image:url("__img__/cellbg1_1_3.png");}
  .daytype3_1{background-image:url("__img__/cellbg2_0_1.png");}
  .daytype4_1{background-image:url("__img__/cellbg2_1_1.png");}
  .daytype3_2{background-image:url("__img__/cellbg2_0_2.png");}
  .daytype4_2{background-image:url("__img__/cellbg2_1_2.png");}
  .daytype3_3{background-image:url("__img__/cellbg2_0_3.png");}
  .daytype4_3{background-image:url("__img__/cellbg2_1_3.png");}
  .ablock{display: block; text-decoration: none;}
  .ainblock{display: inline-block; text-decoration: none;}
  .actionbox{width: 80%; margin: 0 auto; margin-top:15px; background-color:#fadfbb; height: auto; padding-top: 20px; padding-bottom: 20px; border-radius: 10px; text-align: center;}
  #action1 a{width:80%; margin: 0 auto 15px auto; height: 45px; background-color: #ffec42; border-radius: 10px; line-height: 45px; text-align: center; font-size: 22px; color: #ad5408; font-weight: 700;}
  #action1 a:hover{font-size: 24px; color:#f12;}
  #action2{text-align: center;}
  #action2 a{width: 80px; background-color: #ffec42; border-radius: 10px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px;}
  #action3{text-align: left;}
  #action3 ul li{margin-left:20px; border-bottom: 1px dashed #999;margin-right:10px; margin-bottom: 10px; font-size: 20px;}
</style>
</block>
<block name="title">日历</block>
<block name="main">
  <div id="mainbox">
    <div id='leftbox'>
      <div id="calendartitle">
        <ul>
          <li id="logoimg">
          </li>
          <li >
            <div style="height:45px; line-height:45px; font-size:20px;">{$nowtime}</div>
            <div style="height:45px; line-height:45px; font-size:20px;">{$curday}</div>
          </li>
        </ul>
      </div>
      <div id="calendarcell">
        <div id="cellhead">
          <table cellpadding="0" cellspacing="0" border="0" align="center">
            <tr>
              <td align="center">周日</td>
              <td align="center">周一</td>
              <td align="center">周二</td>
              <td align="center">周三</td>
              <td align="center">周四</td>
              <td align="center">周五</td>
              <td align="center">周六</td>
            </tr>
          </table>
        </div>
      <table cellpadding="0" cellspacing="0" border="0" id='calendartable' align="center">
        <tr>
        <volist name="info" id="dayinfo" key='flag'>
          <td align="center" class="{$dayinfo['info']['class']}">{$dayinfo['info']['day']}</td>
          <if condition="$flag % 7 == 0 && $flag % 7 != 42 ">
          </tr><tr>
          </if>
        </volist>
      </table>
      </div>
    </div>
    <div id='rightbox'>
      <div id="action1" class="actionbox">
        <ul>
          <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="ablock" onclick="todayaction(1)">工作</a></li>
          <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="ablock" onclick="todayaction(2)">休息</a></li>
        </ul>
      </div>
      <div id="action2" class="actionbox">
        <ul>
          <li><a href="?daytime={$lastmday}" rel="external nofollow" class="ainblock" >上一月</a><a href="?daytime={$nextmday}" rel="external nofollow" class="ainblock" >下一月</a></li>
        </ul>
      </div>
      <div id="action3" class="actionbox">
        <ul>
          <li>本月共计:{$curdaysum} 天</li>
          <li>本月已工作:{$workdays} 天</li>
          <li>本月剩余工作日:** 天</li>
          <li>预计工资:**天</li>
        </ul>
      </div>
      <div id="action4" class="actionbox">
        <ul>
          <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="ablock">设置</a></li>
        </ul>
      </div>
    </div>
  </div>
</block>
<block name="js">
<script type="text/javascript" src="__js__/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
  function todayaction(type){
    $.post("{:u('log/addlog')}",{'type':type},function(data){
      if(data['status']==1){
        alert('数据添加完成');
      }else{
        alert('数据异常');
      }
    });
  }
</script>
</block>

思路分析

1.在calendar.class.php中,封装每个月的日期信息。如果读者需要做日历,只需要将该文件作为一个类调用即可。
如下图

?
1
2
3
4
5
$calendar=new \util\calendar();
$info=$calendar->getcalendar();
echo json_encode($info);
//输出结果如下
[{"id":"2016-5-29","info":{"day":29,"type":1}},{"id":"2016-5-30","info":{"day":30,"type":1}},{"id":"2016-5-31","info":{"day":31,"type":1}},{"id":"2016-6-1","info":{"day":1,"type":2}},{"id":"2016-6-2","info":{"day":2,"type":2}},{"id":"2016-6-3","info":{"day":3,"type":2}},{"id":"2016-6-4","info":{"day":4,"type":2}},{"id":"2016-6-5","info":{"day":5,"type":2}},{"id":"2016-6-6","info":{"day":6,"type":2}},{"id":"2016-6-7","info":{"day":7,"type":2}},{"id":"2016-6-8","info":{"day":8,"type":2}},{"id":"2016-6-9","info":{"day":9,"type":2}},{"id":"2016-6-10","info":{"day":10,"type":2}},{"id":"2016-6-11","info":{"day":11,"type":2}},{"id":"2016-6-12","info":{"day":12,"type":2}},{"id":"2016-6-13","info":{"day":13,"type":2}},{"id":"2016-6-14","info":{"day":14,"type":2}},{"id":"2016-6-15","info":{"day":15,"type":2}},{"id":"2016-6-16","info":{"day":16,"type":2}},{"id":"2016-6-17","info":{"day":17,"type":2}},{"id":"2016-6-18","info":{"day":18,"type":2}},{"id":"2016-6-19","info":{"day":19,"type":2}},{"id":"2016-6-20","info":{"day":20,"type":2}},{"id":"2016-6-21","info":{"day":21,"type":2}},{"id":"2016-6-22","info":{"day":22,"type":2}},{"id":"2016-6-23","info":{"day":23,"type":2}},{"id":"2016-6-24","info":{"day":24,"type":2}},{"id":"2016-6-25","info":{"day":25,"type":2}},{"id":"2016-6-26","info":{"day":26,"type":2}},{"id":"2016-6-27","info":{"day":27,"type":2}},{"id":"2016-6-28","info":{"day":28,"type":2}},{"id":"2016-6-29","info":{"day":29,"type":2}},{"id":"2016-6-30","info":{"day":30,"type":2}},{"id":"2016-7-1","info":{"day":1,"type":3}},{"id":"2016-7-2","info":{"day":2,"type":3}},{"id":"2016-7-3","info":{"day":3,"type":3}},{"id":"2016-7-4","info":{"day":4,"type":3}},{"id":"2016-7-5","info":{"day":5,"type":3}},{"id":"2016-7-6","info":{"day":6,"type":3}},{"id":"2016-7-7","info":{"day":7,"type":3}},{"id":"2016-7-8","info":{"day":8,"type":3}},{"id":"2016-7-9","info":{"day":9,"type":3}}]

2.在worklog.class.php中,获取该用户上一个月、当前月、下一个月的工作信息,之所以使用一次性获取三个月的工作信息,因为如果每天的去读取,这样数据查询的次数过大,当然最好的还是做一下缓存比较好。读取到工作信息后,然后结合日历,判断每天是否工作,以及是否是周末,来决定日历中每个方格的背景样式。工作信息数据库如下图:

基于ThinkPHP实现的日历功能实例详解

希望本文所述对大家基于thinkphp框架的php程序设计有所帮助。