效果图:
HTML文件:
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/Schedule.css">
</head>
<body>
<div class="top-nav">
<ul>
<li>
<a>
<p><span class="glyphicon glyphicon-menu-left"></span><span>日程安排</span></p>
</a>
</li>
</ul>
</div>
<div class="topHeight">
</div>
<div class="schedule">
<div class="scheduleMonth">
<h4 id="tHeader_0"></h4>
<table id="tableList_0">
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="scheduleMonth">
<h4 id="tHeader_1"></h4>
<table id="tableList_1">
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="scheduleMonth">
<h4 id="tHeader_2"></h4>
<table id="tableList_2">
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="scheduleXx">
<h5>任务信息</h5>
</div>
<div id="taskMain_1">
<ul>
</ul>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/Schedule.js"></script>
</body>
</html>
css样式
.topHeight{
width: 100%;
height: 54px;
}
a:focus {
color: #000000;
text-decoration: underline;
}
@media(device-height:667px) and (-webkit-min-device-pixel-ratio:2){
/* 兼容iphone6 */
.top-nav{
height: 45px!important;
}
.topHeight{
height: 50px!important;
}
.top-nav a p{
padding-top: 12px!important;
font-size: 16px!important;
}
.taskSearchShow{
width: 30px!important;
height: 30px!important;
}
.top-nav ul li img{
width: 30px!important;
}
}
@media(device-height:736px) and (-webkit-min-device-pixel-ratio:3){
/* 兼容iphone6Plu*/
.top-nav{
height: 45px!important;
}
.topHeight{
height: 50px!important;
}
.top-nav a p{
padding-top: 12px!important;
font-size: 16px!important;
}
.taskSearchShow{
width: 30px!important;
height: 30px!important;
}
.top-nav ul li img{
width: 30px!important;
}
}
/*.showSchedule{*/
/*position: fixed;*/
/*display: none;*/
/*z-index: 1;*/
/*width: 90%;*/
/*height: 300px;*/
/*background: rgba(255, 255, 255, 0);*/
/*}*/
.top-nav{
background-color: #222222;
box-shadow: 1px 1px 1px #003e71;
height: 50px;
position: fixed;
z-index: 6;
width: 100%;
}
.top-nav a{
/*width: 80px;*/
color: #fff;
font-weight: 600;
font-size: 15px;
}
.top-nav a:hover{
text-decoration: none;
}
.top-nav a p{
width: 120px;
padding: 12px 2px;
}
.top-nav a p span:first-child{
margin-top: 1px;
}
.top-nav ul{
list-style: none;
-webkit-padding-start: 0px;
}
.top-nav ul li{
float: left;
}
.top-nav ul li img{
width: 20px;
float: right;
right: 9px;
top:7px;
position: fixed;
}
/*表单*/
h4{
-webkit-margin-before: 0.33em;
-webkit-margin-after: 0.33em;
width: 265px;
text-align: center;
}
table{
border: 0;
border-collapse: separate;
border-spacing: 0px;
border-color: grey;
}
td{
border-right: 1px solid #474747;
border-bottom: 1px solid #474747;
padding: 10px;
text-align: center;
cursor: pointer;
}
th{
font-size: 12px;
font-weight: 400;
text-align: center;
}
td:first-child{
border-left: 1px solid #000000;
}
.tdBG{
background: #d7d9db;
}
.tdBGB{
background: #d7d9db !important;
}
/*表单end*/
.schedule{
text-align: center;
height: 300px;
overflow: hidden;
overflow-y: auto;
border-bottom: 1px solid #ddd;
}
.scheduleMonth{
margin-left: 10%;
}
.monthBg{
background: #66faaa;
color: #fff;
}
.thisMonth{
background: #d84750 !important;
color: #fff;
}
.nTodayBg{
background: #f99f4c;
color: #fff;
}
.scheduleXx{
width: 100%;
border-bottom: 2px solid #d84750;
}
.scheduleXx h5{
margin-top: 5px;
margin-bottom: 5px;
padding: 3px;
}
#taskMain_1{
margin-bottom: 10px;
}
#taskMain_1 ul{
list-style: none;
-webkit-padding-start: 0px;
}
#taskMain_1 ul li{
padding-left: 5px;
height: 63px;
border-bottom: 1px solid #ddd;
}
.taskMain_1_list h5{
-webkit-margin-before: 0;
padding-top: 10px;
}
.taskMain_1_list img{
width: 31px;
}
.taskMain_1_list p{
font-size: 11px;
color: #afafaf;
height: 17px;
width: 100%;
}
.taskMain_1_list p img{
width: 14px;
}
.taskMain_1_list p span{
min-width: 100px!important;
text-align: left;
padding-right: 10%;
/*float: right;*/
}
a{
color: #000;
}
a:hover{
color: #000;
text-decoration: none;
}
.divFinish{
/*position: absolute;*/
float: right;
/*left: 295px;*/
z-index: 3;
}
js脚本:
/**
* Created by Administrator on 2015/7/28.
*/
$(function(){
//当前月
var currentDate = new Date();//当前月的日期
var currentYear=currentDate.getFullYear();//当前年
var currentMonth=(currentDate.getMonth()+1);//当前年
currentDate.setDate(1);//当前月第一天
var firstWeekday=currentDate.getDay();//一周的节点
// alert(currentMonth);
currentDate.setMonth(currentDate.getMonth() + 1);
var currentLastDate = new Date(currentDate - 3600000*24);//本月的最后一天
// alert(currentDate.getMonth());
$("#tHeader_1").append(currentYear+"年"+currentMonth+"月");
$("#tableList_1").addClass("Month_"+currentMonth);
// alert(currentDate.getDate());
//当前月end
//上一个月
var beforeDate=new Date();
beforeDate.setFullYear(currentYear,(currentMonth-2),1);//上月的日期
// beforeDate.setMonth(beforeDate.getMonth());
var beforeDateWeekday=beforeDate.getDay();//一周的节点
beforeDate.setMonth(beforeDate.getMonth() + 1);
//alert(beforeDateWeekday)
var beforeLastDate = new Date( beforeDate- 3600000*24);//上月的最后一天
$("#tHeader_0").append(beforeDate.getFullYear()+"年"+beforeDate.getMonth()+"月");
$("#tableList_0").addClass("Month_"+beforeDate.getMonth());
//上一个月end
//上上一个月
var beforeBeforeDate =new Date();
beforeBeforeDate.setFullYear(currentYear,(currentMonth-2),1);//上上月的日期
var beforeBeforeLastDate = new Date( beforeBeforeDate - 3600000*24);//上月的最后一天
//上上一个月end
//下个月
var nextDate =new Date();//上月的日期
nextDate.setFullYear(currentYear,currentMonth,1);//下月的日期
var nextDateWeekday=nextDate.getDay();//一周的节点
nextDate.setMonth(nextDate.getMonth() +1);
// alert(nextDateWeekday)
var nextLastDate = new Date( nextDate- 3600000*24);//上月的最后一天
$("#tHeader_2").append(nextDate.getFullYear()+"年"+nextDate.getMonth()+"月");
$("#tableList_2").addClass("Month_"+nextDate.getMonth());
//下个月end
showMessage(0,beforeBeforeLastDate,beforeDateWeekday,beforeLastDate);//上一个月
showMessage(1,beforeLastDate,firstWeekday,currentLastDate);//当前月
showMessage(2,currentLastDate,nextDateWeekday,nextLastDate);//下一个月
$(".schedule").scrollTop($(".scheduleMonth").height());//锁定位置
$.post(conn,{GID:GID,TASKUSERID:TASKUSERID},function(data){
//localStorage.taskGroupTaskList_0 = data;
data=setTranscoding(data);
console.log(data);
for(var m=0;m<data.body.rows.length;m++){
var getData=data.body.rows[m];
var Month=getData.ENDDATE.split("-")[1].replace(/0/g,'');
var DateNow=getData.ENDDATE.split("-")[2].replace(/0/g,'');
if( $(".Month_"+Month+" .td_"+DateNow).hasClass("tdBG")){
//$(".tdBG").addClass("tdBGB");
$(".Month_"+Month+" .td_"+DateNow).addClass("monthBg");
$(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE);
$(".tdBG").removeClass("monthBg");
}else{
$(".Month_"+Month+" .td_"+DateNow).addClass("monthBg");
$(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE);
}
//console.log(getData.ENDDATE.split("-")[1].replace(/0/g,''));
//console.log(getData.ENDDATE.split("-")[2]);
}
});
//今天
var nToday= new Date();
// alert("月:"+(nToday.getMonth()+1)+",囸:"+nToday.getDate())
$(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).addClass("nTodayBg");
$(".nTodayBg").addClass("thisMonth");
if($(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).hasClass("tdBG")){
$(".tdBG").addClass("tdBGB");
$(".tdBG").removeClass("thisMonth");
$(".tdBG").removeClass("nTodayBg");
}
//console.log(nToday.getDate());
//今天end
//$(".schedule td").bind("touchstart",function(e){
$(".schedule td").bind("click",function(e){
// e.preventDefault();
//console.log($(this).attr("class"));
//console.log($(this).attr("class").split("Z")[1]);
$("td").removeClass("thisMonth");
$(this).addClass("thisMonth");
$("#taskMain_1 ul").empty();
if(undefined!=$(this).attr("class").split("Z")[1]){
var END_DATE=$(this).attr("class").split("Z")[1].replace(/ thisMonth/g,'');
//console.log(END_DATE);
$.post(conn+"",{END_DATE:END_DATE,GID:GID,TASKUSERID:TASKUSERID},function(Schedule){
});
}
});
$(".top-nav a:eq(0) p").bind("touchstart",function(e) {
e.preventDefault();
timeOutEvent1 = setTimeout(function(){
if(g==3){
location.replace(localStorage.taskGroupUrl+"&g="+g);
}
clearTimeout(timeOutEvent1);//清除定时器
},100);
//location.replace(document.referrer);
});
//body: Object
//rows: Array[3]
//0: Object
//ENDDATE: "2015-07-31"
//STATUS: "0"
// alert(beforeDateWeekday);
// alert(beforeLastDate.getDate());
// 当前月
});
/*
@num div的下表
@beforeLastDate 上一个月的最后一天
@firstWeekday 第一天星期几的位置
@currentLastDate 这个月的最后一天
*/
function showMessage(num,beforeLastDate,firstWeekday,currentLastDate){
$("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").append("1");
$("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").addClass("td_1");
var BeforeLastDate=beforeLastDate.getDate();
if(firstWeekday>0){
for(var i=1;i<=firstWeekday;i++){
$("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").append(BeforeLastDate);
$("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("tdBG");
$("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("td_"+BeforeLastDate);
BeforeLastDate--;
}
}
var k=2;
for(var j=(firstWeekday+1);j<=7;j++){
$("#tableList_"+num+" tr:eq(1) td:eq("+j+")").append(k);
$("#tableList_"+num+" tr:eq(1) td:eq("+j+")").addClass("td_"+k);
k++;
}
// alert(currentLastDate.getDate())
var m=Math.ceil((currentLastDate.getDate()-(6-firstWeekday))/7);
for(var k=0;k<m;k++){
$("#tableList_"+num).append("<tr></tr>");
}
var temp=parseInt($("#tableList_"+num+" tr:eq(1) td:eq(6)").text());
for(i=2;i<(m+2);){
for (var j = 0; j < 7; j++){
if(temp<currentLastDate.getDate()) {
temp++;
$("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='td_"+temp+"'>" + temp + "</td>");
// if(temp<6) $("#tableList tr:eq(" + i+ ")").append("<td class='tdBG td_"+i+"'>" + temp + "</td>");
temp1=1;
}
else{
$("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='tdBG td_"+temp1+"'>" + temp1 + "</td>");
temp1++;
}
if(j==6){
i++;
}
}
}
$("#tableList_"+num+" tr:eq(1) td").css({"border-top": "1px solid #474747"});
// 当前月end
}
//var timeOutEvent=0;//定时器
//function gTouchStart(){
// timeOutEvent = setTimeout("longPress()",500);
// return false;
//};
//function longPress(){
// timeOutEvent = 0;
//}
//function gtouchend(){
// clearTimeout(timeOutEvent);//清除定时器
// if(timeOutEvent!=0){
// }
// return false;
//};
//function gtouchmove(){
// clearTimeout(timeOutEvent);
// timeOutEvent = 0;
//};