样式如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日程表</title>
<link rel="stylesheet" href="css/calendar.css" />
</head>
<body>
<section id="webPage" v-cloak>
<div id="calendarTable">
<table>
<thead>
<tr>
<th></th>
<th style="cursor:pointer;" @click="getCalendar('last')"><b><</b></th>
<th colspan="3"><b><span>{{ currentYear }}年</span> <span>{{ currentMonth }}月</span></b></th>
<th style="cursor:pointer;" @click="getCalendar('next')"><b>></b></th>
<th></th>
</tr>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="(vo, index) in calendarList" v-if="index<7">
<div class="dotLabel" :class="vo>7?'notCurrent':''" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
<tr>
<td v-for="(vo, index) in calendarList" v-if="index>=7 && index<14">
<div class="dotLabel" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
<tr>
<td v-for="(vo, index) in calendarList" v-if="index>=14 && index<21">
<div class="dotLabel" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
<tr>
<td v-for="(vo, index) in calendarList" v-if="index>=21 && index<28">
<div class="dotLabel" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
<tr>
<td v-for="(vo, index) in calendarList" v-if="index>=28 && index<35">
<div class="dotLabel" :class="vo<20?'notCurrent':''" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
<tr v-if="calendarList.length>35">
<td v-for="(vo, index) in calendarList" v-if="index>=35">
<div class="dotLabel" :class="vo<20?'notCurrent':''" @click="chooseDate(index)">{{ vo }}</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="scheduleList" v-if="scheduleList.length">
<div class="scheduleItem" v-for="(vo, index) in scheduleList" @click="toDetail(vo.id)">
<img src="image/clock.png" />
<div class="setTime">{{ vo.time }}</div>
<div class="todoContent">{{ vo.content }}</div>
</div>
</div>
<div id="scheduleList" v-else>
<p style="text-align:left;">暂无待办事项</p>
</div>
<div id="addItem" onclick="addSchedule()">
<img src="image/calendar.png" />
<p>添加待办事项</p>
</div>
</section>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</html>
calendar.css代码如下：
html, body{
width: 100%;
height: 100%;
overflow: hidden;
font-size: 16px;
}
section{
width: 406px;
height: 550px;
position: relative;
padding: 8px;
margin: 0 auto;
border: 1px solid #DDD;
}
/* 日历 */
#calendarTable table{
width: 100%;
text-align: center;
}
#calendarTable table tr{
height: 30px;
}
#calendarTable thead th{
min-width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
color: #6CB0DB;
padding: 8px;
}
#calendarTable td{
min-width: 40px;
height: 30px;
padding: 8px;
background-color:#F5F5F5;
}
#calendarTable td div{
width: 100%;
height: 100%;
text-align: center;
}
.dotLabel{
background: url(../image/dot.png) no-repeat bottom center;
background-size: 16px 16px;
cursor: pointer;
}
/* 选中日期样式 */
.activeDate{
background-color: #CCC;
}
/* 非当月日期样式 */
.notCurrent{
color:#C0C0C0;
}
/* 待办事项 */
#scheduleList{
width:100%;
height: 150px;
margin-top: 10px;
overflow-x: hidden;
overflow-y: auto;
}
.scheduleItem{
display: flex;
display: -webkit-flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
.scheduleItem img{
width: 22px;
height: 22px;
}
.scheduleItem .setTime{
width: 140px;
text-align: center;
}
.todoContent{
width: 100%;
height: 26px;
line-height: 26px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 添加事项按钮 */
#addItem{
width: 100%;
height: 30px;
line-height: 30px;
display: inline-block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
cursor: pointer;
}
#addItem img{
width: 22px;
height: 22px;
display: inline-block;
vertical-align: text-top;
}
#addItem p{
display: inline-block;
}
<script type="text/javascript">
var datePicker;
var vm = new Vue({
el:"#webPage",
data:{
currentYear: new Date().getFullYear(), // 当前年份
currentMonth: new Date().getMonth()+1, // 当前月份
lastMonth:this.currentMonth==1?12:new Date().getMonth(), // 上一月
nextMonth:this.currentMonth==12?1:new Date().getMonth()+2, // 下一月
lastYear:this.currentMonth==1?new Date().getFullYear()-1:new Date().getFullYear(), // 上一年
nextYear:this.currentMonth==12?new Date().getFullYear()+1:new Date().getFullYear(), // 下一年
calendarList:[], // 日期列表
scheduleList:[{"id":"11111","time":"2020-09-29", "content":"【待办】修改项目bug修改项目bug修改项目bug修改项目bug修改项目bug"}], // 待办事项列表
},
mounted:function(){
this.$nextTick(function(){
this.getCalendar('current');
})
},
methods:{
// 获取日历
getCalendar:function(type){
vm.calendarList = [];
if(type == "last"){
vm.currentYear = vm.currentMonth==1?(vm.currentYear-1):vm.currentYear;
vm.currentMonth = vm.currentMonth==1?12:(vm.currentMonth-1);
}else if(type == "next"){
vm.currentYear = (vm.currentMonth==12)?(vm.currentYear+1):vm.currentYear;
vm.currentMonth = (vm.currentMonth==12)?1:(vm.currentMonth+1);
}
vm.lastMonth = vm.currentMonth==1?12:(vm.currentMonth-1);
vm.lastYear = vm.currentMonth==1?(vm.currentYear-1):vm.currentYear;
vm.nextMonth = vm.currentMonth==12?1:(vm.currentMonth+1);
vm.nextYear = vm.currentMonth==12?(vm.currentYear+1):vm.currentYear;
var currentDayNum = new Date(vm.currentYear, vm.currentMonth, 0).getDate(); // 获取本月天数
var currentDay = new Date(vm.currentYear+"-"+(vm.currentMonth<10?("0"+vm.currentMonth):vm.currentMonth)+"-01").getDay(); // 获取本月1日为星期几
for(var i = 1; i <= currentDayNum; i++){
vm.calendarList.push(i);
}
switch (currentDay) {
case 1: // 星期一
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(29);
}else{
vm.calendarList.unshift(28);
}
}else{
vm.calendarList.unshift(31);
}
break;
case 2: // 星期二
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(29, 30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(28, 29);
}else{
vm.calendarList.unshift(27, 28);
}
}else{
vm.calendarList.unshift(30, 31);
}
break;
case 3: // 星期三
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(28, 29, 30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(27, 28, 29);
}else{
vm.calendarList.unshift(26, 27, 28);
}
}else{
vm.calendarList.unshift(29, 30, 31);
}
break;
case 4: // 星期四
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(27, 28, 29, 30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(26, 27, 28, 29);
}else{
vm.calendarList.unshift(25, 26, 27, 28);
}
}else{
vm.calendarList.unshift(28, 29, 30, 31);
}
break;
case 5: // 星期五
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(26, 27, 28, 29, 30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(25, 26, 27, 28, 29);
}else{
vm.calendarList.unshift(24, 25, 26, 27, 28);
}
}else{
vm.calendarList.unshift(27, 28, 29, 30, 31);
}
break;
case 6: // 星期六
if(vm.lastMonth==4 || vm.lastMonth==6 || vm.lastMonth==9 || vm.lastMonth==11){
vm.calendarList.unshift(25, 26, 27, 28, 29, 30);
}else if(vm.lastMonth==2){
if((vm.lastYear%4==0 && vm.lastYear%100!=0) || vm.lastYear%400==0){
vm.calendarList.unshift(24, 25, 26, 27, 28, 29);
}else{
vm.calendarList.unshift(23, 24, 25, 26, 27, 28);
}
}else{
vm.calendarList.unshift(26, 27, 28, 29, 30, 31);
}
break;
}
var lackDate = 7 - (vm.calendarList.length % 7);
if(lackDate < 7){
for(var j = 0; j < lackDate; j++){
vm.calendarList.push(j+1);
}
}
},
// 选中日期
chooseDate:function(index){
$("#calendarTable").find("td:eq("+index+")").css({"background-color":"#39F", "color":"#FFF"});
$("#calendarTable").find("td:eq("+index+")").parent("tr").siblings("tr").children("td").css({"background-color":"#F5F5F5", "color":"#333"});
},
// 查看待办事项详情
toDetail:function(id){},
// 添加待办事项
addSchedule:function(){},
}
})
</script>
