el-calendar日历组件完整代码
-
- [1. 说在前面](#1. 说在前面)
- [2. 日历整体代码](#2. 日历整体代码)
- [3. 编辑与新增](#3. 编辑与新增)
1. 说在前面
- 最近一直忙于上班，没咋看博客，发现很多小伙伴都要日历组件的代码，于是今天抽空给大家整理一下，为爱发电！
- 日历组件的原文在这里，建议先看这个哈：日历组件使用总结
- 需求说明和注意事项都在上文了，这篇文章纯代码。
- 由于此页面很复杂，为了让大家减轻看代码的负担，去掉了很多没用的逻辑。
- data()里面的数据和css就没一个个搞了，大家看着来。
- 一年多前写的，还是Vue2的语法。
2. 日历整体代码
javascript
<el-dialog
title="新增日计划"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label>
<el-form-item label="月份：">
<el-date-picker
v-model="formInline.month"
type="month"
placement="bottom-start"
value-format="yyyy-MM"
format="yyyy-MM"
placeholder="选择月"
clearable
@change="monthChange"
></el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label>
<el-select
v-model="formInline.projectId"
clearable
placeholder="选择项目"
@change="projectChangeFn"
>
<el-option
v-for="(item, index) in projectArr"
:key="index"
:label="item.proRemake"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="editDetail()">查询</el-button>
</el-form-item>
</el-form>
<el-calendar v-model="value">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template slot="dateCell" slot-scope="{ date, data }">
<div class="main-cd" @click="addPlan(data)">
<div class="calendar-day">
{{ data.day.split("-").slice(2).join("-") }}
</div>
<div
v-for="(item, index) in calendarData"
:key="index"
class="is-selected"
@click.stop="addPlan(item)"
>
<span v-if="item.day == data.day && item.timeDetailsList">
<el-tooltip placement="top">
<div slot="content">
<div
v-for="items in item.timeDetailsList"
:key="items.day"
>
{{ items.channelName }} :
{{ items.wechatNumber }}个微信号， 计划投放{{
items.planNumber
}}， 实际加人
{{ items.realityNumber }}
</div>
</div>
<div v-for="items in item.timeDetailsList" :key="items.day">
{{ items.channelName }} :
{{ items.wechatNumber }}个微信号， 计划投放{{
items.planNumber
}}， 实际加人
{{ items.realityNumber }}
</div>
</el-tooltip>
</span>
</div>
</div>
</template>
</el-calendar>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>- 实现的效果是这样的：
- 对应的控制方法在这里：
javascript
// 关闭弹窗
handleClose() {
this.dialogVisible = false;
},
// 月份改变，下面的数据刷新
monthChange(val) {
// 这里的数据就是当前月份
this.value = val;
// 去请求不同月份的数据 刷新日历组件
this.editDetail();
},
// 接口请求
editDetail(){
// 请求接口，目的就是刷新日历数据 => calendarData
this.calendarData = res.data;
},3. 编辑与新增
- 接下来是新增与编辑的逻辑，其实就是打开两个不同的弹窗：
- 当然，逻辑做了删减，因为大家肯定是不需要的。
javascript
<!-- 新增 -->
<el-dialog
:title="diaTitle"
width="70%"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<div class="parent-con">
<div class="left">
<div class="tips">设置微信号</div>
</div>
</div>
<div slot="footer" class="dialog-footer form-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmFn">保 存</el-button>
<el-button type="primary" @click="confirmFn('next')" v-if="isAdd"
>保存并创建下个计划</el-button
>
</div>
</el-dialog>
<!-- 编辑弹窗 -->
<el-dialog
title="编辑日计划"
:visible.sync="dialogVisibleEdit"
width="60%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleCloseEdit"
>
<div class="edit-time">时间：{{ editTime }}</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleEdit = false">取 消</el-button>
<el-button type="primary" @click="confirmEditFn">确 定</el-button>
</span>
</el-dialog>
- 打开编辑与新增，是共用一个方法
javascript
addPlan(item) {
// 此方法是用来清空数据的，防止数据重复
this.clearDataForm();
// 编辑才有这个参数
if (item && item.projectId) {
this.diaTitle = "编辑日计划";
this.dialogVisibleEdit= true; // 打开编辑
// 调用接口 做数据回显
}else {
// 此处做新增逻辑
this.diaTitle = "新增日计划";
this.dialogFormVisible = true; // 打开新增
}
}- 其他逻辑实现：
javascript
// 监听日历的当前值
watch: {
value(val, oldVal) {
this.nowTime = this.newDate(val);
let tempIndex = this.getIndex();
// 匹配某一项数据
if (tempIndex > -1) {
this.inputVal = this.calendarData[tempIndex].things;
} else {
this.inputVal = "";
}
},
},
// 做对应的处理，这是在 methods里面的 时间转换
newDate(time) {
let date = new Date(time);
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
// 用于匹配与当前日期相符的数据
getIndex() {
let tempIndex = this.calendarData.findIndex(
(item) => item.date == this.nowTime
);
return tempIndex;
},
// 初始化时间 => 在 mounted 里调用的
initData() {
this.nowTime = this.newDate(this.value);
},- css部分，没做删减了，大家要的肯定在里面，需要找一下：
javascript
<style lang="scss" scoped>
.add-bidding {
.calendar-day {
color: #202535;
font-size: 14px;
}
.is-selected {
color: #f8a535;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#calendar
.el-button-group
> .el-button:not(:first-child):not(:last-child):after {
content: "当月";
}
.inputVal {
width: 300px;
}
.main-cd {
width: 100%;
height: 100%;
padding: 10px;
overflow: hidden;
}
::v-deep .el-calendar-day {
padding: 0;
}
::v-deep .el-calendar-table:not(.is-range) td.next {
display: none;
}
::v-deep .el-calendar-table:not(.is-range) td.prev {
visibility: hidden;
}
::v-deep .el-calendar__button-group {
display: none;
}
.now-time {
font-size: 18px;
height: 40px;
line-height: 40px;
span {
color: #409eff;
}
}
.form-footer {
text-align: center;
}
.edit-time {
margin-bottom: 20px;
font-size: 16px;
}
.check-staff-box {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
.csb-child {
margin-right: 20px;
}
}
.parent-con {
width: 100%;
.tips {
width: 100%;
border-left: 4px solid #525357;
text-indent: 10px;
margin-bottom: 20px;
font-size: 16px;
font-weight: bold;
}
}
.remarke {
color: #999999;
}
.rule-num {
margin-top: 10px;
}
}
</style>1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)
