效果如下:
PHP端代码:
/** * 日历 * * @param string month */ public static function day_report($params = []) { $month = $params['month']; if (empty($month)) { $month = date('Y-m'); } $month_begin = strtotime($month . '-01'); $month_end = strtotime("+1 months", $month_begin) - 24*3600; $dt_begin = $month_begin - (date('N', $month_begin)-1) * 24*3600; $dt_end = $month_end + (7 - date('N', $month_end)) * 24*3600; $today = strtotime(date('Y-m-d')); $list = []; $dt = $dt_begin; while ($dt <= $dt_end) { $class = ''; if ($dt < $month_begin || $dt > $month_end) { $class .= ' other'; } if ($dt == $today) { $class .= ' today'; } if ($dt > $today) { $class .= ' future'; } $list[] = [ 'dt' => date('Y-m-d', $dt), 'day' => date('j', $dt), 'class' => $class, ]; $dt += 24*3600; } $list = array_chunk($list, 7); // 月份选择 $month_val = strtotime($month . '-01'); $month_cur = date('Y年m月', $month_val); $month_pre = date('Y-m', strtotime("-1 months", $month_val)); $month_next = ''; if ($month != date('Y-m')) { $month_next = date('Y-m', strtotime("+1 months", $month_val)); } $data = [ 'month' => $month, 'list' => $list, 'month_cur' => $month_cur, 'month_pre' => $month_pre, 'month_next' => $month_next, ]; return self::_success($data); }
HTML端代码:
<h3 class="page-header"><i class="fa fa-calendar"></i> 工作日历</h3> <style> .h3-month { margin:10px 0; } .h3-month span { display:inline-block; border-radius: 5px; background-color: #eee; border:solid 1px #ddd; padding:0 10px; font-size:0.9; } #tbDayList{ width:auto; } #tbDayList th{ font-size:30px; } #tbDayList .td-day{ width:100px; height:10px; line-height: 100px; padding:0; font-size:50px; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; color:#72B9F7; } #tbDayList .other{ color:#999; } #tbDayList .future{ color:#bbb; } #tbDayList .today{ color:blue; } </style> <h3 class="h3-month"> <a href="/index.php?_=work_log::day_report&month={ $month_pre }"><i class="fa fa-chevron-left"></i></a> <span>{ $month_cur }</span> { if $month_next != '' } <a href="/index.php?_=work_log::day_report&month={ $month_next }"><i class="fa fa-chevron-right"></i></a> { /if } </h3> <table id="tbDayList" class="tb"> <thead> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th style="color:blue;">周六</th> <th style="color:blue;">周日</th> </thead> <tbody> { foreach $list as $week } <tr> { foreach $week as $r } <td class="td-day { $r.class }" data-dt="{ $r.dt }">{ $r.day }</td> { /foreach } </tr> { /foreach } </tbody> </table>
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
2011-06-27 金山词霸-即划即译