首先在template加如下代码
<el-calendar v-model="日期">
<template slot="dateCell" slot-scope="{date, data}">
<div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
<div class="calendar-day">
{{
data.day
.split('-')
.slice(2)
.join('-')
}}{{ data.isSelected ? '✔️' : ''}}
</div>
<div
v-for="(item, index) in formatSchedule(data)"
:key="index"
class="subject_info"
>{{item.工作内容}}</div>
</div>
</template>
</el-calendar>
监听日历的各种点击事件
mounted() {
this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(1)"
);
prevBtn.addEventListener("click", () => {
if (this.Jobdata.部门id == "") {
return;
}
this.GetJobset();
});
});
this.$nextTick(() => {
// 点击今天
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(2)"
);
prevBtn.addEventListener("click", () => {
if (this.Jobdata.部门id == "") {
return;
}
this.GetJobset();
});
});
this.$nextTick(() => {
// 点击后一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:last-child"
);
prevBtn.addEventListener("click", () => {
if (this.Jobdata.部门id == "") {
return;
}
this.GetJobset();
});
});
this.$nextTick(() => {
// 点击日历单元格
let prevBtn = document.querySelectorAll(".el-calendar-table__row td");
prevBtn.forEach(element => {
element.addEventListener("click", () => {
if (this.Jobdata.部门id == "") {
return;
}
this.GetJobset();
});
});
});
},
监听值的变化和日程展示数据
//监听日历点击变化
watch: {
日期: function(newVal, oldVal) {
this.Jobdata.日期 = moment(newVal).format("YYYY-MM-DD");
}
},
computed: {
formatSchedule() {
return data => {
return this.list.filter(ele => {
let time = ele.日期; // 将时间戳转格式
return moment(time).isSame(data.day); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
});
};
}
}
相关函数
/**
*获得本月的开始日期和结束日期
*/
export function getMonthStartDateAndDateRange(time) {
let oneDayLong = 24 * 60 * 60 * 1000;
let now = time;
let year = now.getFullYear();
let monthStartDate = new Date(year, now.getMonth(), 1); //当前月1号
let nextMonthStartDate = new Date(year, now.getMonth(), 1); //下个月1号
let days = (nextMonthStartDate.getTime() -
monthStartDate.getTime()) / oneDayLong; //计算当前月份的天数
let monthEndDate = new Date(year, now.getMonth() + 1, days);
let monthRange = [moment(monthStartDate).format("YYYY-MM-DD"), moment(monthEndDate).format("YYYY-MM-DD")];
return monthRange;
}
GetJobset() {
//获取当前日历页面日期区间axio请求后端数据自己替换
Personnel.GetJobcontext(
getMonthStartDateAndDateRange(this.日期)[0],
getMonthStartDateAndDateRange(this.日期)[1],
this.Jobdata.部门id
).then(response => {
this.list = response.data.data;
});
},
更多推荐
(精华)2020年7月19日 vue element-ui日历实现日程安排和区间查询
发布评论