elementui el-calendar日历组件使用示例
作者：瑞瑞_
这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
需求
需要在日历基础上展示每天排班记录及排班详情、当天是否有异常情况。完成效果：
elementui自带切换月份按钮与设计图不符，所以我隐藏了插件自带的按钮，自己加了个左右切换图标，代码如下：
// 隐藏组件自带切换月份按钮
::v-deep.el-calendar .el-calendar__button-group{
display: none;
}
在html中新增
<!-- 日历两侧年月切换 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />具体代码实现
html
<!-- 日历两侧年月切换 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />
<!-- 日历 -->
<el-calendar v-model="calendarVal">
<template slot="dateCell" slot-scope="{date, data}">
<div @click="viewDetail(data.day)">
<div class="date">{{ data.day.slice(8) }}</div>
<div v-for="item in schedulingData.schedulingHandle">
<div v-if="item.date == data.day">
<!-- 是否异常 -->
<div class="abnormal-state" v-if="item.hasException === true"></div>
<!-- 排版情况 === memberAmount：根据是否有值班成员判断是否排班;isPast：日期是否已过；isToday：是否是今天 -->
<div class="scheduling-state scheduling-state-notset" v-if="item.memberAmount === 0">
<img src="../../../../assets/img/scheduling/scheduling-state1.png">
<span class="f14">未排</span>
</div>
<div class="scheduling-state scheduling-state-ordering1" v-if="item.memberAmount > 0 && item.isPast === true && item.isToday === false">
<img src="../../../../assets/img/scheduling/scheduling-state2.png">
<span class="f14">已排</span>
</div>
<div class="scheduling-state scheduling-state-ordering2" v-if="item.memberAmount > 0 && item.isToday === true">
<img src="../../../../assets/img/scheduling/scheduling-state3.png">
<span class="f14">已排</span>
</div>
<div class="scheduling-state scheduling-state-ordering3" v-if="item.memberAmount > 0 && item.isPast === false && item.isToday === false">
<img src="../../../../assets/img/scheduling/scheduling-state4.png">
<span class="f14">已排</span>
</div>
<!-- 当日排班情况弹窗 -->
<div class="today-scheduling-detail" v-if="item.showTodayScheduling">
<div class="today-scheduling-title">当日排班</div>
<div class="today-scheduling-center">
<div class="today-scheduling-item" v-for="item1 in item.todayDetail">
<div class="name1">{{ item1.shiftName }}</div>
<div class="name2">{{ item1.crewName }}</div>
</div>
</div>
<div class="today-scheduling-footer">
<div class="edit"><span class="el-icon-edit"></span>编辑</div>
<div class="view"><span class="el-icon-view"></span>查看</div>
</div>
</div>
</div>
</div>
</div>
</template>
</el-calendar>
<div class="back-to-today" @click="dateCut(5)">回到今天</div>js
dateCut(type) {
// type：1 月份左侧按钮，2 月份右侧按钮，3 年份左侧按钮，4 年份右侧按钮，5 回到今天
if (type === 1) {
this.calendarVal = new Date(this.calendarVal).getMonth() > 0 ?
new Date(this.calendarVal).getFullYear() + '-' + new Date(this.calendarVal).getMonth() + '-01' :
new Date(this.calendarVal).getFullYear() - 1 + '-12' + '-01'
} else if (type === 2) {
this.calendarVal = new Date(this.calendarVal).getMonth() < 11 ?
new Date(this.calendarVal).getFullYear() + '-' + (Number(new Date(this.calendarVal).getMonth()) + 2) + '-01' :
new Date(this.calendarVal).getFullYear() + 1 + '-01' + '-01'
} else if (type === 3) {
this.calendarVal = new Date(this.calendarVal).getFullYear() - 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
} else if (type === 4) {
this.calendarVal = new Date(this.calendarVal).getFullYear() + 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
} else if (type === 5) {
this.calendarVal = this.getDate(new Date()).fullDate
}
this.getData() // 调接口数据
},css代码
// 日历组件样式修改
.is-selected {
color: #1989FA;
}
::v-deep.el-calendar{
height: calc(100% - 35px);
}
::v-deep.el-calendar .el-calendar__body{
padding-bottom: 16px;
height: calc(100% - 80px);
}
::v-deep.el-calendar .el-calendar-table{
height: 100%;
}
.el-backtop, ::v-deep.el-calendar .el-calendar-table td.is-today .date{
//background: #5E97F9;
//box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
//color: #fff;
background: #DCE9FF;
color: rgba(0,0,0,0.45);
}
.el-backtop, ::v-deep.el-calendar .el-calendar-table .date:hover{
background: #DCE9FF;
color: rgba(0,0,0,0.45);
}
::v-deep.el-calendar .el-calendar-table .el-calendar-day:hover{
background: none;
}
::v-deep.el-calendar .el-calendar-table td.is-selected{
background: none;
}
::v-deep.el-calendar .el-calendar-table td.is-selected .date{
background: #5E97F9;
box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
color: #fff;
}
::v-deep.el-calendar .el-calendar__button-group{
display: none;
}
::v-deep.el-calendar .el-calendar__title{
margin: 0 auto;
}
::v-deep.el-calendar .el-calendar-table .el-calendar-day{
position: relative;
}日历组件就完成了，有任何问题欢迎大家留言！
以上就是elementui el-calendar日历组件使用示例的详细内容，更多关于elementui el-calendar日历组件的资料请关注脚本之家其它相关文章！