(精华)2020年7月19日 vue element-ui日历实现日程安排和区间查询
【摘要】
首先在template加如下代码
<el-calendar v-model="日期">
<template slot="dateCell" slot-scope="{d...
首先在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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
监听日历的各种点击事件
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();
});
});
});
},
- 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
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
监听值的变化和日程展示数据
//监听日历点击变化
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); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
});
};
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
相关函数
/**
*获得本月的开始日期和结束日期
*/
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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
GetJobset() {
//获取当前日历页面日期区间axio请求后端数据自己替换
Personnel.GetJobcontext(
getMonthStartDateAndDateRange(this.日期)[0],
getMonthStartDateAndDateRange(this.日期)[1],
this.Jobdata.部门id
).then(response => {
this.list = response.data.data;
});
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。
原文链接:codeboy.blog.csdn.net/article/details/107440367
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)