el-calendar日历的各种样式及事件

效果图

班和休互相修改功能

el-calendar HTML代码段

可以根据自己的需要显示内容，样式

<template><div class="la-container"><div class="la-info-main"><!-- 关于日历控件 --><el-calendarclass="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)"><spanv-if="calendarData.indexOf(data.day) == -1 &&queryDate.indexOf(data.day) != -1">班</span><spanv-else-if="calendarData.indexOf(data.day) > -1 &&queryDate.indexOf(data.day) != -1"style="color: #f73131">休</span><span v-else>&nbsp;</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-pickerclearable 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=falsethis.$parent.getDayList()})}else{return false}})}}
}
</script>

有不懂的可以私信！

有用的留下一个赞

el-calendar日历的各种样式及事件相关推荐

WPF Calendar 日历控件样式自定义
原文:WPF Calendar 日历控件样式自定义粗略的在代码上做了些注释 blend 生成出来的模版有的时候会生成跟 vs ui界面不兼容的代码会导致可视化设计界面报错崩溃掉但是确不 ...
Android 添加Calendar日历提醒事件
本文介绍如何在Android App中添加或删除一个提前10分钟提醒的日历日程. 实现分为两部分:申请Calendar权限:添加或删除日历日程. 相关知识:Android申请权限完整代码下载一.申 ...
日历 android 周历,Android Studio 基础之获取系统Calendar 日历日程（涉及指定日期时间判断是星期几的方法使用）的方法整理...
Android Studio 基础之获取系统Calendar 日历日程 (涉及指定日期时间判断是星期几的方法使用)的方法整理目录 Android Studio 基础之获取系统Calendar ...
Python3 日期时间相关模块(time(时间) / datatime(日期时间) / calendar(日历))
Python3 日期时间相关模块(time(时间) / datatime(日期时间) / calendar(日历)) 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog. ...
电子日历HTML布局,calendar日历使用
java中的Calendar如何使用的? Java中日历类(CalendarClass)的用途? Java中日历类(Calendar类)的用途如下: Calendar类的静态方法getInstance ...
Android Studio 基础之获取系统Calendar 日历日程（可获得当天以后可设定天数范围内的日历日程）（涉及指定日期时间判断是星期几的方法使用）的方法整理
Android Studio 基础之获取系统Calendar 日历日程(可获得当天以后可设定天数范围内的日历日程) (涉及指定日期时间判断是星期几的方法使用)的方法整理目录 Android St ...
element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）
最近接触到一个需求,做一个值班排班表,拿到低保真之后一直在考虑是如何实现这个排班表,考虑过自己写,也考虑过@fullcalendar/vue插件,经过一些评估之后最终选择了项目本身使用的element ...
Java的知识点22——时间处理相关类、Date时间类(java.util.Date)、DateFormat类和SimpleDateFormat类、Calendar日历类
时间处理相关类用long类型的变量来表示时间,获得现在时刻的"时刻数值":long now = System.currentTimeMillis(); Date时间类(java. ...
js样式会覆盖html样式,js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加...
(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种 ...

el-calendar日历的各种样式及事件

效果图

el-calendar HTML代码段

js代码段

el-calendar css样式

修改类型的弹窗代码

el-calendar日历的各种样式及事件相关推荐

最新文章

热门文章