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

程序员文章站 2024-03-13 09:35:09

本文实例讲述了基于thinkphp实现的日历功能。分享给大家供大家参考，具体如下：开发环境介绍最新，闲来没事，便开发了一款简单的日历，来统计工作情况。为了开发便捷，...

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

开发环境介绍

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

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

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

重要文件描述

功能文件

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

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

代码如下：

<?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文件，主要负责将用户工作信息与日历信息结合起来。

<?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

<?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

<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中，封装每个月的日期信息。如果读者需要做日历，只需要将该文件作为一个类调用即可。
如下图

$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实现的日历功能实例详解