效果图
班和休互相修改功能
el-calendar HTML代码段
可以根据自己的需要显示内容，样式
<template>
<div class="la-container">
<div class="la-info-main">
<!-- 关于日历控件 -->
<el-calendar
class="lar-el-calendar"
v-model="value"
:first-day-of-week="7"
>
<template slot="dateCell" slot-scope="{ date, data }">
<div
:class="
calendarData.indexOf(data.day) > -1
? 'lar-is-selected'
: 'lar-no-selected'
"
@click="holidayUpdate(data, date)"
>
<span
v-if="
calendarData.indexOf(data.day) == -1 &&
queryDate.indexOf(data.day) != -1
"
>班</span
>
<span
v-else-if="
calendarData.indexOf(data.day) > -1 &&
queryDate.indexOf(data.day) != -1
"
style="color: #f73131"
>休</span
>
<span v-else> </span>
<div
:style="
calendarData.indexOf(data.day) > -1
? 'color:#F73131;text-align:center'
: 'text-align:center'
"
>
{{ data.day.split("-").slice(1).join("-") }}
</div>
</div>
</template>
</el-calendar>
</div>
<ladrawer ref="drawer"></ladrawer>
</div>
</template>js代码段
el-calendar的上一页，今天，下一页的按钮点击事件在ui库里没有，需要用的话需要在mounted里写监听事件，如下
<script>
import ladrawer from "./components/calendarDialog.vue";
import Api from "@/api";
export default {
name: "CalendarConfig",
data() {
return {
queryDate: [], //查询的日期
calendarData: [], //所有假期对应的日期
value: new Date(),
year: new Date().getFullYear(),
};
},
components: {
ladrawer,
},
mounted() {
this.getDayList();
this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(1)"
);
prevBtn.addEventListener("click", () => {
this.judgeDate();
});
let dayBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(2)"
);
dayBtn.addEventListener("click", () => {
this.judgeDate();
});
let nextBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(3)"
);
nextBtn.addEventListener("click", () => {
this.judgeDate();
});
});
},
methods: {
// 获取日期列表
getDayList() {
Api.common
.getDayList({
year: this.year,
month: "",
})
.then((res) => {
this.calendarData = [];
this.queryDate = [];
res.data.map((item) => {
let time =
item.day.toString().slice(0, 4) +
"-" +
item.day.toString().slice(4, 6) +
"-" +
item.day.toString().slice(6);
if (item.isWork == 0) {
this.calendarData.push(time);
}
this.queryDate.push(time);
});
});
},
//节日内容编辑
holidayUpdate(dataVal, dateVal) {
this.$refs.drawer.infoscope = {};
this.$refs.drawer.infoscope = {
holidayDate: [dataVal.day], // 日期
years: dataVal.day.substring(0, dataVal.day.indexOf("-")), //获取年份//年份
};
this.$refs.drawer.drawer = true;
},
// 判断时间
judgeDate() {
let d = new Date(this.value);
if (this.year != d.getFullYear()) {
this.year = d.getFullYear();
this.getDayList();
}
},
},
};
</script>el-calendar css样式
<style lang="scss">
.lar-el-calendar {
.el-calendar-table td.is-selected {
background-color: #a2e5a2 !important;
}
.el-calendar-table td .el-calendar-day:hover {
background-color: #a2e5a2 !important;
}
.current.is-today {
background: green;
color: #fff;
}
}
</style>修改类型的弹窗代码
<template>
<el-dialog :visible.sync="drawer" width="600px"
append-to-body
:close-on-click-modal="false"
title="修改类型"
>
<el-form ref="infoscope" :model="infoscope" :rules="rulesinfoscope" label-width="80px">
<el-form-item label="日期：" prop="holidayDate">
<el-date-picker
clearable
size="small"
v-model="infoscope.holidayDate"
type="dates"
value-format="yyyy-MM-dd"
placeholder="选择时间">
</el-date-picker>
</el-form-item>
<el-form-item label="类型：" prop="holidayType">
<el-select size="small" v-model="infoscope.holidayType" placeholder="请选择类型" clearable>
<el-option label="休息日" value="0"></el-option>
<el-option label="工作日" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="drawer=false">取 消</el-button>
<el-button type="primary" @click="sure">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import Api from "@/api"
export default {
data(){
return{
drawer:false,
title:'1',
infoscope:{
holidayDate:[],
holidayType:''
},
rulesinfoscope:{
holidayDate: [
{ required: true, message: '请选择时间', trigger: 'change' }
],
holidayType: [
{ required: true, message: '请选择类型', trigger: 'change' }
],
},
}
},
methods:{
sure(){
this.$refs.infoscope.validate(val=>{
if(val){
let day=this.infoscope.holidayDate.map(item=>{
return Number(item.replace(/-/g,''))
})
Api.common.updateWorkFlag({
days:day,
isWorkDay:this.infoscope.holidayType,
}).then(res=>{
this.$message.success('修改成功')
this.drawer=false
this.$parent.getDayList()
})
}else{
return false
}
})
}
}
}
</script>
有不懂的可以私信！
有用的留下一个赞👍，谢谢