日历控件，可以在此基础上做更多的扩展，如实现行程安排等
<title>日历控件</title>
<meta>
<meta>
<meta>
<meta>
<style>
.rili {
margin: 30px 0px;
overflow: hidden;
text-align: center;
color: #666
}
.low_calendar {
overflow: hidden;
border: 1px solid #c8d2dc;
}
.low_calendar h1 {
width: 100%;
background: #ff6f7e;
font-size: 14px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-weight: 100;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
position: relative
}
.calGrid table {
width: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.calGrid table th {
background-color: #fff;
border-left: 1px solid #whiteSmoke;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: center;
vertical-align: middle;
color: #999;
color: #505050;
border-bottom: 1px solid #C8C8C8;
}
.calGrid table td {
width: 12%;
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: 700 text-align : center;
color: #4A5056;
border-bottom: 1px solid #C8C8C8;
border-left: 1px solid #ccc;
position: relative;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.calGrid table td img {
position: absolute;
left: 0;
top: 0;
display: none
}
.calGrid table td.curr img {
display: block
}
.calGrid table td.disable {
color: #ED5565;
}
.calGrid table td:first-child {
border-left: none;
}
.calGrid table tr:last-child td {
border-bottom: none;
}
.calGrid table td.holiday {
font-size: 12px;
}
.calGrid table th.week_day, .calGrid table td.week_day {
color: #ED5565
}
.calGrid table td.curr {
line-height: 25px;
font-size: 13px;
color: #fff;
background: #ff6f7e;
-moz-box-shadow: 2px #7d92a7 inset;
-webkit-box-shadow: 2px #7d92a7 inset;
box-shadow: 2px #7d92a7 dcdeeb;
}
.calGrid table td.curr span {
display: block;
font-size: 12px;
line-height: 10px;
}
.low_calendar h1 .ldate {
width: 25px;
height: 25px;
background: url(images/ldate.png) no-repeat;
float: left;
position: absolute;
top: 2px;
left: 10px;
overflow: hidden;
text-indent: -99999px
}
.low_calendar h1 .rdate {
width: 25px;
height: 25px;
background: url(images/rdate.png) no-repeat;
float: right;
position: absolute;
top: 2px;
right: 10px;
overflow: hidden;
text-indent: -99999px
}
</style>
<script></script><?php /**
* User: yuluo
* Date: 2015-05-08
* Time: 下午3:08
* Desc:实现生成指定月份的日历信息 在此基础上可以无限遐想和扩展...
*/
date_default_timezone_set("Asia/Shanghai");
$time_now = time(); //strtotime("2015-02-04");
if($_REQUEST["date"]){
$time_now = strtotime($_REQUEST["date"]);
}
function getCurMonthFirstDay($date)
{
return date('Y-m-01', strtotime($date));
}
function getCurMonthLastDay($date)
{
return date('Y-m-d', strtotime(date('Y-m-01', strtotime($date)) . ' +1 month -1 day'));
}
$current_y = date("Y", $time_now);
$current_m = date("m", $time_now);
$next_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' +1 month'));
$pre_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' -1 month'));
?><p>
</p><p>
</p><p>
</p><h1>
<a>">上一月</a><span><?php echo($current_y); ?>年<?php echo($current_m); ?>月</span><a>">下一月</a>
</h1>
<p>
</p>
| 周日 | 周一 | 周二 | 周三 | 周四 | 周五 | 周六 |
|---|---|---|---|---|---|---|
| " class=""> |
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
