在ElemenUI中使用日历组件el-calendar
引入组件
import { Calendar } from 'element-ui'
import 'element-ui/lib/theme-chalk/calendar.css'
Vue.use(Calendar)
组件部分
<template>
<div class="mod-config">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="以日历展示" name="first">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox>
</el-form-item>
<el-form-item>
<el-checkbox-group v-model="dataForm.checkValList" @change="handleChecked">
<!-- <el-checkbox v-for="(item,index) in this.$sysDic.otcEventRemindTypeEnumList" :key="index"-->
<!-- :label="item.value" :value="item.label">{{ item.label }}-->
<!-- </el-checkbox>-->
<el-checkbox label="type1"><span style="background-color: #FFC7CE">类型1</span></el-checkbox>
<el-checkbox label="type2"><span style="background-color: #FFEB9C">类型2</span></el-checkbox>
<el-checkbox label="type3"><span style="background-color: #EDEDED">类型3</span></el-checkbox>
<el-checkbox label="type4"><span style="background-color: #C6EFCE">类型4</span></el-checkbox>
<el-checkbox label="type5"><span style="background-color: #DDEBF7">类型5</span></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-calendar v-model="dataForm.calValue" class="lar-el-calendar">
<template
slot="dateCell"
slot-scope="{date, data}">
{{ data.day.split('-').slice(1).join('-') }}
<div style="width:100%;" v-for="(item,index) in dataList" :key="index">
<p v-if="(item.eventType == '类型1' && item.recordDate === data.day)" class="type1"
@click="isDialog(data)">
{{ item.code + ':' + item.eventType }}
</p>
<p v-if="(item.eventType == '类型2' && item.recordDate === data.day)" class="type2"
@click="isDialog(data)">
{{ item.code + ':' + item.eventType }}
</p>
<p v-if="(item.eventType == '类型3' && item.recordDate === data.day)" class="type3"
@click="isDialog(data)">
{{ item.code + ':' + item.eventType }}
</p>
<p v-if="(item.eventType == '类型4' && item.recordDate === data.day)" class="type4"
@click="isDialog(data)">
{{ item.code + ':' + item.eventType }}
</p>
<p v-if="(item.eventType == '类型5' && item.recordDate === data.day)" class="type5"
@click="isDialog(data)">
{{ item.code + ':' + item.eventType }}
</p>
</div>
</template>
</el-calendar >
</el-tab-pane>
</el-tabs>
<el-dialog
title="日历详情"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleDialogClose">
<el-row :gutter="20" style="text-align: center">
<el-col :span="12">
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
样式部分
<style lang="scss">
<style lang="scss">
.type1 {
display: inline-block;
background-color: #FFEB9C;
color: black;
margin:1px 0px;
}
.type2 {
display: inline-block;
background-color: #C6EFCE;
color: black;
margin:1px 0px;
}
.type3 {
display: inline-block;
background-color: #EDEDED;
color: black;
margin:1px 0px;
}
.type4 {
display: inline-block;
background-color: #DDEBF7;
color: black;
margin:1px 0px;
}
.type5 {
display: inline-block;
background-color: #FFC7CE;
color: black;
margin:1px 0px;
}
.lar-el-calendar {
//
.el-calendar-table td.is-selected {
//background-color: #a2e5a2 !important;
}
.el-calendar-table td {
//background-color: black !important;
overflow-x: auto;
}
.el-calendar-table td .el-calendar-day:hover {
//background-color: black !important;
}
.el-calendar-day {
}
.el-calendar-table__row {
}
//.current.is-today {
// background: green;
// color: #fff;
//}
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: black;
}
//.el-carousel__item h3 {
// color: #475669;
// font-size: 14px;
// opacity: 0.75;
// line-height: 200px;
// margin: 0;
//}
//.el-carousel__item:nth-child(2n) {
// background-color: #99a9bf;
//}
//.el-carousel__item:nth-child(2n + 1) {
// background-color: #d3dce6;
//}
//.el-calendar {
// width: 500px;
// height: 600px;
//}
</style>
函数部分
<script>
// import * as utils from '@/utils/utils'
export default {
data () {
return {
dataForm: {
calValue: new Date(),
checkValList: [],
checkOptions: []
},
isIndeterminate: true,
checkAll: false,
infoForm: {},
activeName: 'first',
tableHeight: 0,
dataList: [],
pageIndex: 1,
pageSize: 50,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
dialogVisible: false
}
},
components: {},
activated () {
this.$sysDic.otcEventRemindTypeEnumList.forEach(item => {
this.dataForm.checkOptions.push(item.value)
})
this.getDataList()
},
watch: {
// 监测日期变化 更新数据
'dataForm.calValue': function () {
this.getDataList()
}
},
methods: {
calTableHeight () {
this.tableHeight = window.innerHeight - this.$refs['tableData'].$el.offsetTop - 169
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('xxx'),
method: 'get',
params: this.$http.adornParams({
'checked': this.dataForm.checkValList.join(','),
'calValue': this.getDateStr(this.dataForm.calValue)
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.list
this.calTableHeight()
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
handleClick (tab, event) {
switch (tab.name) {
case 'first':
this.getDataList()
break
}
},
dataHandler (data) {
console.log(data.day)
},
isDialog (data) {
// 预留展示弹窗 改为True即可
this.dialogVisible = false
// console.log(data)
},
handleDialogClose () {
},
// 全选
handleCheckAllChange (val) {
this.dataForm.checkValList = val ? this.dataForm.checkOptions : []
this.isIndeterminate = false
},
// 多选框点击
handleChecked (val) {
this.getDataList()
let checkedCount = val.length
this.checkAll = checkedCount === this.dataForm.checkValList.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkValList.length
}
}
}
</script>
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Yang!