效果如下:
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>