小鱼儿心语：世上有能挽回的和不能挽回的事，而时间就是一种不可挽回的事，也许，不负光阴就是最好的努力，而努力就是最好的自己。—— 村上春树
昨天刚刚实现了一个小功能，日历只展示近一周日期，并且自定义内容，同时可以切换上一周、下一周的数据，简简单单的一个小功能，实现起来也是有很多不可避免地坑，需要仔细点挖，哈哈哈哈哈哈哈~
废话不多说，先来看下效果展示吧：
日历.png
v-if="(data.day.split('-').slice(2).join('-')).indexOf(item.date.split('-')[2])!=-1"这个判断是必不可少的哦，我就是在这里吃了大亏，起初以为这句没用，但是事实很有用，为了判断循环数组中与每天的日期作对比，对应该日期的自定义内容才会显示；不然所有的内容都会展示在一个日期框中~
- 设置
range属性指定日历的显示范围。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。
<el-calendar :range="[starttime, endtime]">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template slot="dateCell" slot-scope="{date, data}">
<div style="margin-top: -10px;">{{ data.day.split('-').slice(2).join('-') }}</div>
<div v-if="(data.day.split('-').slice(2).join('-')).indexOf(item.date.split('-')[2])!=-1" style="width:100%;position: relative;top: -40px;" v-for="(item,index) in tableDataleader" @click="tapdetail(item)" :key="index">
<span :style="{color:item.qList.length=='0'?'':'#e75454'}" v-if="item.timechuo<=nowtime">{{item.qList.length=='0'?'正常':'空岗'}}</span>
<i style="display: block;width:100%;position: absolute;top:20px;">{{ data.isSelected ? '✔️' : ''}}</i>
</div>
</template>
</el-calendar>
下面是获取当前日期所在一周的日期数据、获取当前第几周、点击上一周、下一周日期获取：
1、获取当前日期所在一周的日期数据
getWeektime () {
let oneDayTime = 1000 * 60 * 60 * 24
let today = new Date()
let todayDay = today.getDay() || 7
let startDate = new Date(
today.getTime() - oneDayTime * (todayDay - 1)
)
let dateList = []
this.tableDataleader = []
for (let i = 0; i < 7; i++) {
let temp = new Date(startDate.getTime() + i * oneDayTime)
let year = temp.getFullYear()
let month = temp.getMonth() + 1 < 10 ? '0' + (temp.getMonth() + 1) : temp.getMonth() + 1
let day = temp.getDate() < 10 ? '0' + temp.getDate() : temp.getDate()
dateList[i] = `${year}-${month}-${day}`
}
// 以下是根据实际情况进行赋值
this.starttime = dateList[0]
this.endtime = dateList[dateList.length-1]
this.getWeekNumber(this.starttime)
this.tapleaderlist()
// dateList为当前日期所在一周的数据
return dateList
},
2、点击事件：获取上一周、下一周的日期数据
// 点击上一周的方法
tapshang(){
this.getTime(-7,this.starttime)
},
// 点击下一周的方法
tapxia(){
this.getTime(7,this.starttime)
},
getTime(time,datenum) {
// time = 7下周 -7上周 0本周
let date = new Date(datenum); //this.chaoZuoTime
let currentFirstDate = new Date(date);
let formatDate = function(date) {
// console.log(date);
let year = date.getFullYear(); //年
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
// let arr = ["日", "一", "二", "三", "四", "五", "六"];
let week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][
date.getDay()
];
//我需要的格式是 （周几 月.日） 这里看你们的需求
return year + "-" + month + "-" + day;
};
let addDate = function(date, n) {
// console.log(date.getDate() + n);
date.setDate(date.getDate() + n);
return date;
};
let setDate = function(date) {
let week = date.getDay() - 1;
date = addDate(date, week * -1);
currentFirstDate = new Date(date);
let weekList = [];
for (let i = 0; i < 7; i++) {
weekList[i] = formatDate(i == 0 ? date : addDate(date, 1));
}
return weekList;
};
this.thisWeek = []
// let upWeek = setDate(addDate(currentFirstDate, -7)); // 上一周的日期数据
this.thisWeek = setDate(addDate(currentFirstDate, time)); // 获取到上一周 / 下一周的日期数据
// let nextWeek = setDate(addDate(currentFirstDate, 7)); // 下一周的日期数据
// let today = formatDate(date); //今日日期
//以下是根据实际情况赋值
this.starttime = this.thisWeek[0]
this.endtime = this.thisWeek[this.thisWeek.length-1]
this.getWeekNumber(this.thisWeek[0])
this.tapleaderlist()
},
3、点击上一周、下一周的同时我们还要获取到该周为当年的第几周：
isLeapYear (year) {
return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0)
},
getMonthDays (year, month) {
return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] || (this.isLeapYear(year) ? 29 : 28)
},
// date为某一个日期：'2023-08-08'
getWeekNumber (date) {
var now = new Date(date),
year = now.getFullYear(),
month = now.getMonth(),
days = now.getDate()
for (var i = 0; i < month; i++) {
days += this.getMonthDays(year, i)
}
var yearFirstDay = new Date(year, 0, 1).getDay() || 7
var week = null
if (yearFirstDay == 1) {
week = Math.ceil(days / yearFirstDay)
} else {
days -= (7 - yearFirstDay + 1)
week = Math.ceil(days / 7) + 1
}
console.log(new Date(year, 0, 1).getDay())
this.weeknum = week
return week
},
以上就是我在此功能中用到的所有方法，供大家参考，代码直接复制即可~
