---------------------------index.html-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="date.js"></script>
<script>
$(function () {
$("#monitor td span").click(function(){
$(this).addClass('mark1')
.parent().siblings().children('span').removeClass('mark1');
});
})
</script>
<style>
</style>
</head>
<body>
<!--我的日程 start-->
<div id="rightPart2" class="box rightPart2">
<div class="title2">日程</div>
<div class="schedule">
<div id="calendar" class="dateShow">
<div class="weekPick">
<div id="last-week" class="lastW" title="上一周"></div>
<div class="timeRange" id="timeRange"></div>
<div id="next-week" class="nextW" title="下一周"></div>
</div>
<table id="dayshow" class="dates">
<tr>
<td class="padleft" colspan="2"><span>日</span></td>
<td><span>一</span></td>
<td><span>二</span></td>
<td><span>三</span></td>
<td><span>四</span></td>
<td><span>五</span></td>
<td class="padright" colspan="2"><span>六</span></td>
</tr>
<tr id="monitor">
<td class="padleft" colspan="2"><span>19</span></td>
<td class="mark2"><span>20</span></td>
<td><span>21</span></td>
<td><span>22</span></td>
<td class="mark2"><span>23</span></td>
<td><span>24</span></td>
<td class="padright" colspan="2"><span>25</span></td>
</tr>
</table>
</div>
<div class="detailed">
<ul class="rclist">
<li><span class="time">10:30</span><span class="explain">我的日程表上已经排满了很多的事情。</span></li>
<li><span class="time">11:30</span><span class="explain">我抱怨我的日程表、我的家庭、我的处境和可能抱怨的一切，认为是它们让我陷入困境。</span></li>
<li><span class="time">12:30</span><span class="explain">把每周回顾列入我的日程表中是我要做的第一步.</span></li>
<li><span class="time">13:30</span><span class="explain">我一般在每周五下午做每周回顾.</span></li>
<li><span class="time">14:30</span><span class="explain">因为在周末之前让我感觉到一周就要结束了(应该总结一下了).</span></li>
<li><span class="time">15:30</span><span class="explain">有些人习惯于周日晚上作回顾,这样在下周一时对刚刚总结过的事情印象比较深刻.</span></li>
<li><span class="time">16:30</span><span class="explain">作好回顾的关键是把它列入日程表</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
———————————————————————————index.css———————————————————————————————————
button{
margin: 0;
font: inherit;
color: inherit;
overflow: visible;
text-transform: none;
border: none;
text-align: center;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.rightPart2{
width: 358px;
height: 414px;
border: 1px solid #d5d5d5;
background: #fff;
margin: 100px auto;
}
/* 我的日程 */
.title2{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #d5d5d5;
cursor: move;
overflow: hidden;
}
.schedule{
width:100%;
}
.dateShow{
border-bottom: 1px #dbdbdb solid;
height:125px;
}
.weekPick{
height: 40px;
line-height: 40px;
}
.lastW,.nextW{
float: left;
height: 40px;
width: 50px;
box-sizing: border-box;
}
.lastW:active,.nextW:active{
background-color: #eee;
}
.timeRange{
height: 40px;
width: 258px;
float: left;
text-align: center;
}
table.dates{
width:100%;
}
table.dates tr th{
/*padding: 10px 5px;*/
text-align:center
color:#666;
font-weight: normal !important;
}
table.dates tr th,
table.dates tr td{
text-align:center;
}
table.dates tr td{
padding:6px 0;
cursor: pointer;
}
.lastM{
background:#fff url(images/double-left.png) no-repeat;
background-position:0 8px;
}
.lastW{
background:#fff url(images/pre.png) center no-repeat;
}
.nextW{
background:#fff url(images/next.png) center no-repeat;
}
.nextM{
background:#fff url(images/double-right.png) no-repeat;
background-position:14px 8px;
}
table.dates tr td span{
display: inline-block;
width:24px;
height:24px;
line-height:24px;
text-align:center;
background: #fff;
cursor: pointer;
}
.mark1{
background: #028BE0 !important;
color:#fff;
border-radius: 100%;
}
.mark2{
background: url(images/spoint.png) no-repeat top;
}
.padleft{
padding-left:38px !important;
}
.padright{
padding-right:38px !important;
}
.tl{
text-align:left !important;
}
.tr{
text-align:right !important;
}
.detailed{
padding:10px 16px;
height:220px;
overflow:hidden;
overflow-y:auto;
}
.rclist{
overflow:hidden;
padding-bottom:20px;
}
.detailed ul li{
}
.detailed ul li span{
display: inline-block;
color:#666;
}
.detailed ul li{
width:100%;
/* position: relative; */
float:left;
margin-bottom: 10px;
}
.time{
width:60px;
float:left;
background: url(images/point.png) no-repeat left;
padding-left:14px;
}
.explain{
width:310px;
float:left;
/* position: absolute;
left:60px;
top:0; */
}
.downBtn{
width:100%;
background: url(images/downbtn.png) center;
text-align: center;
cursor: pointer;
display: block;
}
—————————————————————————date.js———————————————————————
$(function(){
var cells = document.getElementById('monitor').getElementsByTagName('span');
var day1 = document.getElementById('curday');
var day7 = document.getElementById('curday7');
var timeRange = document.getElementById('timeRange');
var clen = cells.length;
var currentFirstDate;
var myDate=new Date();
today=myDate.getDate();//获取当前日期
var formatDate = function(date){
var year = date.getFullYear()+'年';
var month = (date.getMonth()+1)+'月';
var day = date.getDate();
var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
return day;
};
var addDate= function(date,n){
date.setDate(date.getDate()+n);
return date;
};
var setDate = function(date){
var week = date.getDay();
date = addDate(date,week*-1);
currentFirstDate = new Date(date);
for(var i = 0;i<clen;i++){
cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1));
if (cells[i].innerHTML==today) {
cells[i].className='mark1';
};
// day1.innerHTML=(date.getMonth()+1)+'月'+cells[0].innerHTML+'日';
// day7.innerHTML=(date.getMonth()+1)+'月'+cells[6].innerHTML+'日'+ date.getFullYear();
timeRange.innerHTML = (date.getMonth()+1)+'月'+cells[0].innerHTML+'日' + ' - ' +(date.getMonth()+1)+'月'+cells[6].innerHTML+'日'+' '+ date.getFullYear()+'年'
}
};
document.getElementById('last-week').onclick = function(){
console.log(111);
setDate(addDate(currentFirstDate,-7));
};
document.getElementById('next-week').onclick = function(){
console.log(111);
setDate(addDate(currentFirstDate,7));
};
// document.getElementById('lastM').onclick = function(){
// setDate(addDate(currentFirstDate,-30));
// };
// document.getElementById('nextM').onclick = function(){
// setDate(addDate(currentFirstDate,30));
// };
setDate(new Date());
});
---------------------------------------------------images----------------------------------------------------------
http://www.jq22.com/demo/schedule201704232243/images/spoint.png
http://www.jq22.com/demo/schedule201704232243/images/pre.png
http://www.jq22.com/demo/schedule201704232243/images/point.png
http://www.jq22.com/demo/schedule201704232243/images/next.png
