效果图
源码如下
<template>
<div class="calendar" @click.stop="">
<div class="calendarCard" v-if="timeArr.length == 2">
<div v-for="(item,index) of timeArr" :key="index" :class="['calendarContent',index == 0 ? 'calendarContentBorder' : '']">
<div class="calendarYmCard">
<div class="calendarYmCardLeft">
<div
:class="['el-icon-d-arrow-left','calendarYmCardCursor', index == 1 && (timeArr[0].Ym[0]*1 + 1 > timeArr[1].Ym[0] || (timeArr[0].Ym[0]*1 + 1 == timeArr[1].Ym[0] && timeArr[0].Ym[1] > timeArr[1].Ym[1])) ? 'calendarYmCardDark' : '']"
:data-flag="index == 1 && (timeArr[0].Ym[0]*1 + 1 > timeArr[1].Ym[0] || (timeArr[0].Ym[0]*1 + 1 == timeArr[1].Ym[0] && timeArr[0].Ym[1] > timeArr[1].Ym[1]))"
@click="changeTime" :data-ym="item.Ym" :data-index="index" data-type="prevYear"></div>
<div :class="['el-icon-arrow-left','calendarYmCardCursor', index == 1 && (timeArr[0].Ym[0] > timeArr[1].Ym[0] || (timeArr[0].Ym[0] == timeArr[1].Ym[0] && timeArr[0].Ym[1] >= timeArr[1].Ym[1])) ? 'calendarYmCardDark' : '']"
:data-flag="index == 1 && (timeArr[0].Ym[0] > timeArr[1].Ym[0] || (timeArr[0].Ym[0] == timeArr[1].Ym[0] && timeArr[0].Ym[1] >= timeArr[1].Ym[1]))"
@click="changeTime" :data-ym="item.Ym" :data-index="index" data-type="prevMonth"></div>
</div>
<div>{{item.Ym[0]}}年{{item.Ym[1]}}月</div>
<div class="calendarYmCardRight">
<div
:class="['el-icon-arrow-right','calendarYmCardCursor',index == 0 && (timeArr[0].Ym[0] > timeArr[1].Ym[0] || (timeArr[0].Ym[0] == timeArr[1].Ym[0] && timeArr[0].Ym[1] >= timeArr[1].Ym[1])) ? 'calendarYmCardDark' : '']"
:data-flag="index == 0 && (timeArr[0].Ym[0] > timeArr[1].Ym[0] || (timeArr[0].Ym[0] == timeArr[1].Ym[0] && timeArr[0].Ym[1] >= timeArr[1].Ym[1])) ? 'calendarYmCardDark' : ''"
@click="changeTime" :data-ym="item.Ym" :data-index="index" data-type="nextMonth"></div>
<div
:class="['el-icon-d-arrow-right','calendarYmCardCursor',index == 0 && (timeArr[0].Ym[0]*1 + 1 > timeArr[1].Ym[0] || (timeArr[0].Ym[0]*1 + 1 == timeArr[1].Ym[0] && timeArr[0].Ym[1] > timeArr[1].Ym[1])) ? 'calendarYmCardDark' : '']"
:data-flag="index == 0 && (timeArr[0].Ym[0]*1 + 1 > timeArr[1].Ym[0] || (timeArr[0].Ym[0]*1 + 1 == timeArr[1].Ym[0] && timeArr[0].Ym[1] > timeArr[1].Ym[1]))"
@click="changeTime" :data-ym="item.Ym" :data-index="index" data-type="nextYear"></div>
</div>
</div>
<div class="calendarWeekCard">
<div v-for="(weekItem,weekIndex) of week" :key="weekIndex+50">{{weekItem}}</div>
</div>
<div class="calendarDayCard" @click="changeDay">
<div class="calendarDayCardDark" v-for="(padStartTimeItem,padStartTimeIndex) of item.padStartTime" :key="padStartTimeIndex+100">{{padStartTimeItem}}</div>
<!--{{}}-->
<div
:class="[
'calendarDayCardCursor',
(index == 0 && startTime[0] == timeArr[0].Ym[0] && startTime[1] == timeArr[0].Ym[1] && startTime[2] == timeItem) || (index == 1 && endTime[0] == timeArr[1].Ym[0] && endTime[1] == timeArr[1].Ym[1] && endTime[2] == timeItem) ? 'calendarDayCardLight' : '',
(index == 0 && (endTime[0] < timeArr[0].Ym[0] || (endTime[0] == timeArr[0].Ym[0] && endTime[1] < timeArr[0].Ym[1]) || (endTime[0] == timeArr[0].Ym[0] && endTime[1] == timeArr[0].Ym[1] && endTime[2] <= timeItem))) || (index == 1 && (startTime[0] > timeArr[1].Ym[0] || (startTime[0] == timeArr[1].Ym[0] && startTime[1] > timeArr[1].Ym[1]) || (startTime[0] == timeArr[1].Ym[0] && startTime[1] == timeArr[1].Ym[1] && startTime[2] >= timeItem))) ? 'calendarDayCardDark' : ''
]"
:data-flag="(index == 0 && startTime[0] == timeArr[0].Ym[0] && startTime[1] == timeArr[0].Ym[1] && startTime[2] == timeItem) || (index == 1 && endTime[0] == timeArr[1].Ym[0] && endTime[1] == timeArr[1].Ym[1] && endTime[2] == timeItem) || (index == 0 && (endTime[0] < timeArr[0].Ym[0] || (endTime[0] == timeArr[0].Ym[0] && endTime[1] < timeArr[0].Ym[1]) || (endTime[0] == timeArr[0].Ym[0] && endTime[1] == timeArr[0].Ym[1] && endTime[2] <= timeItem))) || (index == 1 && (startTime[0] > timeArr[1].Ym[0] || (startTime[0] == timeArr[1].Ym[0] && startTime[1] > timeArr[1].Ym[1]) || (startTime[0] == timeArr[1].Ym[0] && startTime[1] == timeArr[1].Ym[1] && startTime[2] >= timeItem)))"
v-for="(timeItem,timeIndex) of item.time" :key="timeIndex+150" :data-day="timeItem" :data-index="index">{{timeItem}}</div>
<div class="calendarDayCardDark" v-for="(padEndTimeItem,padEndTimeIndex) of item.padEndTime" :key="padEndTimeIndex+200">{{padEndTimeItem}}</div>
</div>
</div>
</div>
<div class="calendarBottom">
<div class="calendarBottomLeft">
<el-button type="primary" plain data-type="1" @click="changeStartAndEnd(1)">本周</el-button>
<el-button type="primary" plain data-type="2" @click="changeStartAndEnd(2)">上周</el-button>
<el-button type="primary" plain data-type="3" @click="changeStartAndEnd(3)">本月</el-button>
<el-button type="primary" plain data-type="3" @click="changeStartAndEnd(4)">上月</el-button>
</div>
<div class="calendarBottomRight">
<el-button type="danger" @click="cancel">清空</el-button>
<el-button type="primary" @click="confirm">确认</el-button>
</div>
</div>
</div>
</template>
<script>
import {ToDate} from '@/utils/public'
export default {
name: 'calendar',
data () {
return {
currentTime:ToDate.getYmd2(),
startTime:[],
endTime:[],
week:['日','一','二','三','四','五','六'],
timeArr:[]
}
},
created(){
let year = this.currentTime.split('/')[0];
let month = this.currentTime.split('/')[1];
let firstYm = [];
if(month == 1){
firstYm = [year - 1 + "",12 + ""]
}else{
firstYm = [year, month - 1 + ""]
}
let secondYm = [year,month+""]
this.timeArr[0] = this.getTimeJson(firstYm);
this.timeArr[1] = this.getTimeJson(secondYm);
},
methods:{
getTimeJson(time){
let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
//获取此月有多少天;
let dateLength = new Date(time[0], time[1], 0).getDate();
//生成此月天数
let arr1 = arr.slice(0,dateLength);
//获取此月第一天星期几
let firstD = new Date(time[0]+'/'+time[1]+'/1').getDay();
//获取上一个月天数
let prevDateLength = '';
if(time[1] == 1){
prevDateLength = new Date(time[0] - 1, 12, 0).getDate();
}else{
prevDateLength = new Date(time[0], time[1] - 1, 0).getDate();
}
//生成此月前面补充天数
let arr2 = [];
if(firstD){
arr2 = arr.slice(prevDateLength - firstD,prevDateLength);
}else{
arr2 = arr.slice(prevDateLength - 7,prevDateLength);
}
//生成此月后面补充天数
let arr3 = [];
if(firstD){
arr3 = arr.slice(0,42 - dateLength - firstD);
}else{
arr3 = arr.slice(0,42 - dateLength - 7);
}
return {
Ym:time,
time:arr1,
padStartTime:arr2,
padEndTime:arr3
}
},
changeTime(e){
let targe = e.target || e.srcElement;
if(targe.dataset.flag){
return
}
let time = targe.dataset.ym.split(',');
let type = targe.dataset.type;
let index = targe.dataset.index;
switch(type){
case "prevYear":
switch(index){
case '0':
this.timeArr = [this.getTimeJson([time[0] - 1,time[1]]) , this.timeArr[1]];
break;
case '1':
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0] - 1,time[1]])];
break;
}
break;
case "prevMonth":
switch(index){
case '0':
if(time[1] == 1){
this.timeArr = [this.getTimeJson([time[0] - 1,12]) , this.timeArr[1]];
}else{
this.timeArr = [this.getTimeJson([time[0],time[1] - 1]) , this.timeArr[1]];
}
break;
case '1':
if(time[1] == 1){
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0] - 1,12])];
}else{
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0],time[1] - 1])];
}
break;
}
break;
case "nextMonth":
switch(index){
case '0':
if(time[1] == 12){
this.timeArr = [this.getTimeJson([time[0] * 1 + 1,1]) , this.timeArr[1]];
}else{
this.timeArr = [this.getTimeJson([time[0],time[1] * 1 + 1]) , this.timeArr[1]];
}
break;
case '1':
if(time[1] == 12){
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0] * 1 + 1,1])];
}else{
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0],time[1] * 1 + 1])];
}
break;
}
break;
case "nextYear":
switch(index){
case '0':
this.timeArr = [this.getTimeJson([time[0] * 1 + 1,time[1]]) , this.timeArr[1]];
break;
case '1':
this.timeArr = [this.timeArr[0] , this.getTimeJson([time[0] * 1 + 1,time[1]])];
break;
}
break;
}
},
changeDay(e){
let targe = e.target || e.srcElement;
if(targe.dataset.flag || targe.dataset.day === undefined){
return
}
if(targe.dataset.index == 0){
this.startTime = this.timeArr[0].Ym.concat([targe.dataset.day])
}
if(targe.dataset.index == 1){
this.endTime = this.timeArr[1].Ym.concat([targe.dataset.day])
}
},
changeStartAndEnd(type){
//获取今天星期几
let whatDay = new Date(this.currentTime).getDay();
let flag = false;
let startTime = [];
let endTime = [];
switch(type + ""){
case '1':
startTime = ToDate.getYmd2(new Date().setDate(new Date().getDate()-whatDay+1)).split('/');
endTime = this.currentTime.split('/');
flag = true;
break;
case '2':
let weekDate = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000);// 计算开始时间用
let weekDate2 = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000);// 计算结束时间用
let day = weekDate.getDay();
let time = weekDate.getDate()-day+(day===0?-6:1);
let startDate = new Date(weekDate.setDate(time));
startTime = [startDate.getFullYear(),(startDate.getMonth()+1),startDate.getDate()];
let endDate = new Date(weekDate2.setDate(time+6));
endTime = [endDate.getFullYear(),(endDate.getMonth()+1),endDate.getDate()];
flag = true;
break;
case '3':
startTime = [this.currentTime.split('/')[0],this.currentTime.split('/')[1],1];
endTime = this.currentTime.split('/');
flag = true;
break;
case '4':
let year = this.currentTime.split('/')[0];
let month = this.currentTime.split('/')[1] - 1;
if (month === 0) {
month = 12;
year = year-1;
} else if (month < 10) {
month = month;
}
let monthDate = new Date(year, month, 0);
startTime = [year,month,1];
endTime = [year,month,monthDate.getDate()];
flag = true;
break;
}
if(flag){
if(this.timeArr[0].Ym[0] != startTime[0] || this.timeArr[0].Ym[1] != startTime[1]){
this.timeArr = [this.getTimeJson([startTime[0],startTime[1]]) , this.timeArr[1]];
}
if(this.timeArr[1].Ym[0] != endTime[0] || this.timeArr[1].Ym[1] != endTime[1]){
this.timeArr = [this.timeArr[0] , this.getTimeJson([endTime[0],endTime[1]])];
}
this.startTime = startTime;
this.endTime = endTime;
}
},
cancel(){
this.startTime = [];
this.endTime = []
},
confirm(){
console.log(this.startTime,this.endTime);
}
}
}
</script>
<style scoped>
.calendar{
background: #fff;
width:50vw;
height:400px;
}
.calendarCard{
display:flex;
border-bottom:1px solid #ccc;
}
.calendarContent{
flex:1;
padding:10px 20px;
}
.calendarContentBorder{
border-right:1px solid #ccc;
}
.calendarYmCard{
display: flex;
justify-content: space-between;
align-items: center;
color:#333;
padding: 10px;
}
.calendarYmCardCursor{
cursor: pointer;
}
.calendarYmCardDark{
color:#ccc;
cursor: not-allowed
}
.calendarWeekCard{
display:flex;
font-size: 14px;
border-bottom: 1px solid #ccc;
}
.calendarWeekCard div{
flex:1;
height:40px;
line-height: 40px;
text-align: center;
color:#333;
}
.calendarDayCard{
display:flex;
flex-wrap: wrap;
font-size: 14px;
}
.calendarDayCard div{
width:14%;
height:40px;
line-height: 40px;
flex-grow: 1;
text-align: center;
color:#333;
}
.calendarDayCard .calendarDayCardCursor{
cursor: pointer;
}
.calendarDayCard .calendarDayCardDark{
color:#ccc;
cursor: auto;
}
.calendarDayCard .calendarDayCardLight{
background:rgb(0,170,255);
color:#fff;
}
.calendarBottom{
display: flex;
justify-content: space-between;
align-items: center;
height:50px;
padding:0 20px;
}
.el-button{
height:30px;
line-height: 30px;
text-align: center;
padding:0 10px;
margin:0;
border-radius: 0;
}
</style>
更多博文请移步至我的博客
