element ui el-calendar日历组件完整代码

el-calendar日历组件完整代码

- 1. 说在前面
- 2. 日历整体代码
- 3. 编辑与新增

1. 说在前面

最近一直忙于上班，没咋看博客，发现很多小伙伴都要日历组件的代码，于是今天抽空给大家整理一下，为爱发电！
日历组件的原文在这里，建议先看这个哈：日历组件使用总结
需求说明和注意事项都在上文了，这篇文章纯代码。
由于此页面很复杂，为了让大家减轻看代码的负担，去掉了很多没用的逻辑。
data()里面的数据和css就没一个个搞了，大家看着来。
一年多前写的，还是Vue2的语法。

2. 日历整体代码

    <el-dialogtitle="新增日计划":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-pickerv-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-selectv-model="formInline.projectId"clearableplaceholder="选择项目"@change="projectChangeFn"><el-optionv-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><divv-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"><divv-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>

实现的效果是这样的：
对应的控制方法在这里：

// 关闭弹窗handleClose() {this.dialogVisible = false;},
// 月份改变，下面的数据刷新monthChange(val) {// 这里的数据就是当前月份this.value = val;// 去请求不同月份的数据 刷新日历组件this.editDetail();},// 接口请求editDetail(){// 请求接口，目的就是刷新日历数据 => calendarData this.calendarData = res.data;},

3. 编辑与新增

接下来是新增与编辑的逻辑，其实就是打开两个不同的弹窗：
当然，逻辑做了删减，因为大家肯定是不需要的。

	<!-- 新增 --><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-dialogtitle="编辑日计划":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>

在这里插入图片描述

打开编辑与新增，是共用一个方法

addPlan(item) {// 此方法是用来清空数据的，防止数据重复this.clearDataForm();// 编辑才有这个参数if (item && item.projectId) {this.diaTitle = "编辑日计划";this.dialogVisibleEdit= true; // 打开编辑// 调用接口 做数据回显}else {// 此处做新增逻辑this.diaTitle = "新增日计划";this.dialogFormVisible = true;  // 打开新增}
}

其他逻辑实现：

 // 监听日历的当前值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部分，没做删减了，大家要的肯定在里面，需要找一下：

<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>