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

<?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 /> <block> <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>日历</block> <block> <div> <div> <div> <ul> <li> </li> <li > <div>{$nowTime}</div> <div>{$curDay}</div> </li> </ul> </div> <div> <div> <table cellpadding="0" cellspacing="0"> <tr> <td>周日</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> </tr> </table> </div> <table cellpadding="0" cellspacing="0"> <tr> <volist key='flag'> <td>{$dayinfo['info']['day']}</td> <if condition="$flag % 7 == 0 && $flag % 7 != 42 "> </tr><tr> </if> </volist> </table> </div> </div> <div> <div> <ul> <li><a href="javascript:;">工作</a></li> <li><a href="javascript:;">休息</a></li> </ul> </div> <div> <ul> <li><a href="?daytime={$lastMDay}" >上一月</a><a href="?daytime={$nextMDay}" >下一月</a></li> </ul> </div> <div> <ul> <li>本月共计:{$curDaySum} 天</li> <li>本月已工作:{$workDays} 天</li> <li>本月剩余工作日:** 天</li> <li>预计工资:**天</li> </ul> </div> <div> <ul> <li><a href="javascript:;">设置</a></li> </ul> </div> </div> </div> </block> <block> <script type="text/javascript" src="https://www.jb51.net/__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中,封装每个月的日期信息。如果读者需要做日历,只需要将该文件作为一个类调用即可。
如下图

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c0bfab2a50b553e0773a412cbd59d3e3.html