element-ui calendar 日历控件实现编辑假期功能以及样式修改

效果图：

1.日历控件html

<template><div class="la-container"><la-pagetitle title="节假日管理" back="true"><template slot="title-btn" ><!-- <el-button size="mini" type="success" @click="addClick()" class="el-icon-plus">创建</el-button> --></template></la-pagetitle><!-- 列表页面 --><div class="la-container-info-item la-container-header"><div class="la-info-title-main"><el-formref="form":model="queryCriteria"label-width="80px"inlineclass="demo-table-expand demo-table-info"style="width: 100%;"><el-form-item><el-inputplaceholder="请输入保养等级"v-model="queryCriteria.years" size="mini" @keyup.enter.native="getList"></el-input></el-form-item><div class="la-el-btn-box"><el-button size="mini" type="primary" @click.native="getList">查询</el-button><el-button size="mini" type="danger" @click="clearQuery">清空</el-button></div></el-form></div></div><div class="la-info-main"><!-- 关于日历控件 --><el-calendar class="lar-el-calendar" :first-day-of-week='7'><templateslot="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)&&(calendarNeirong[data.day].holidayType==3)" style="color:#67C23A">班</span><span  v-if="(calendarData.indexOf(data.day) > -1)&&(calendarNeirong[data.day].holidayType!=3)">休</span><div :style="(calendarData.indexOf(data.day) > -1)&&(calendarNeirong[data.day].holidayType==3) ? 'color:#67C23A;text-align:center':'text-align:center'">{{ data.day.split('-').slice(1).join('-') }}</div><div :style="(calendarData.indexOf(data.day) > -1)&&(calendarNeirong[data.day].holidayType==3) ? 'color:#67C23A;text-align:center':'text-align:center'">{{ calendarData.indexOf(data.day) > -1 ? calendarNeirong[data.day].holidayName : ''}}</div></div></template></el-calendar></div><ladrawer ref="drawer"></ladrawer></div>
</template>
<script>
import index from "./index.js";
export default index;
</script>
<style scoped lang="scss">
@import "~@/styles/listcommon.scss";
@import "~@/styles/Leftrightstructure.scss";.lar-el-calendar .lar-is-selected {color: #F35E5D;// background: #fde2e2;height: 100%}.lar-el-calendar .lar-no-selected{height: 100%}</style>
<style lang="scss">
@import "~@/styles/listcommon-el.scss";
.lar-el-calendar{.prev .lar-is-selected, .next .lar-is-selected{color: #C0C4CC !important;background: #fff !important;}.current.is-today{background: #F2F8FE;}
}</style>

2.在data数据中定义两个参数：

 calendarData：[] //所有假期对应的日期。

calendarNeirong：{} //所有假期对应的数据。

后台接口返回数据：

请求后台接口并将返回数据组装成上诉需要的两组数据：

2.设置样式

假期的数据color为红色

将属于上一月以及下一月的假期样式设置为灰色

`.lar-el-calendar{.prev .lar-is-selected, .next .lar-is-selected{color: #C0C4CC !important;background: #fff !important;}.current.is-today{background: #F2F8FE;}
}`

编辑节假日也组件页面：

<template><el-dialog :visible.sync="drawer" width="600px"append-to-body:close-on-click-modal="false":show-close="false"><div slot="title"><la-modulehead :title="title" :liner="true"><!-- <template slot="title-text" v-if="TerminalForm.position!=undefined"><el-button  size="mini" type="text" style="height:38px;    margin-left: 10px;" @click="signwebterminalslab('update')">修改</el-button></template> --><template slot="title-btn"><el-button  size="mini" @click="preveClick" icon="el-icon-document-checked" type="primary">保存</el-button><el-popconfirm v-if="infoupdate=='update'&&infoscope.buildMethods!=1" title="是否删除？" @onConfirm="deleteClick(infoscope)"><el-button slot="reference" type="danger" size="mini" class="el-icon-document-delete"   >删除</el-button></el-popconfirm><el-button  size="mini" icon="el-icon-close" type="danger" @click="drawer=false">关闭 </el-button></template></la-modulehead></div><el-form ref="rulesinfoscope" :model="infoscope" :rules="rulesinfoscope" label-width="80px"><el-form-item label="假期名称：" prop="holidayName"><el-input  size="small" v-model="infoscope.holidayName" placeholder="请输入假期名称" /></el-form-item><el-form-item label="日期：" prop="holidayDate"><el-date-picker:readonly="true"clearable size="small"v-model="infoscope.holidayDate" type="date" 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="1"></el-option><el-option label="法定节假日" value="2"></el-option><el-option label="班" value="3"></el-option></el-select></el-form-item></el-form>
<!--       <div slot="footer" class="dialog-footer"><el-button type="primary">确 定</el-button><el-button>取 消</el-button><el-button v-if="title == '编辑节假日'" :style="{ background: 'red',color:'white'}">删除</el-button></div> --></el-dialog>
</template><script>
import index from "./index.js";
export default index;
</script>

在假期页面的index.js中注册编辑页面组件并在html页面中调用组件：

调用节假日弹框编辑方法以及查看所有节假日列表数据：

 //节日内容编辑holidayUpdate(dataVal,dateVal){this.$refs.drawer.infoscope = {}if(this.calendarNeirong[dataVal.day]){this.$refs.drawer.infoscope = JSON.parse(JSON.stringify(this.calendarNeirong[dataVal.day]));this.$refs.drawer.infoscope.holidayType = this.$refs.drawer.infoscope.holidayType.toString() //节假日类型this.$refs.drawer.title = '编辑节假日';this.$refs.drawer.infoupdate = "update"console.log(this.$refs.drawer.infoscope)}else{this.$refs.drawer.infoscope = {buildMethods:2,//创建类型 1是自动生成得周末，2是手动添加得holidayDate:dataVal.day,// 日期years:dataVal.day.substring(0,dataVal.day.indexOf("-"))//获取年份//年份}console.log(this.$refs.drawer.infoscope)this.$refs.drawer.title = '新增节假日';this.$refs.drawer.infoupdate = "add"this.$refs.drawer.$global.resetForm(this.$refs.drawer,'rulesinfoscope')}this.$refs.drawer.drawer = true},// 查询节假日管理 - 法定节假日列表getList() {this.$api.apiholidayAndVacationsDataGrid(this.queryCriteria).then(res=>{let data=res.data.obj.rows;this.calendarData=[],this.calendarNeirong={}for(let i=0;i<data.length;i++){this.calendarData.push(data[i].holidayDate);this.calendarNeirong[data[i].holidayDate] = data[i]}console.log(this.calendarData,this.calendarNeirong,'请求接口数据')})}

到此编辑功能结束。
关于大幅度修改日历控件中的样式我使用的是通过原有控件类名重置样式修改。

element-ui calendar 日历控件实现编辑假期功能以及样式修改相关推荐

Element UI 的日历控件，并在日期中做标注
需求:1.在日历中给日期做标注,点击日期获取到当前的日期 2.点击对应的上一月,下一月,今天可以获取到对应的月份 <template><el-card v-model="n ...
WPF Calendar 日历控件样式自定义
原文:WPF Calendar 日历控件样式自定义粗略的在代码上做了些注释 blend 生成出来的模版有的时候会生成跟 vs ui界面不兼容的代码会导致可视化设计界面报错崩溃掉但是确不 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
肝一个嵌入式日历吧！LVGL『Calendar日历控件』介绍
一. LVGL GUI日历控件的概念 LVGL做的日历空间还是比较好看的,而且需要我们做的事情很少,LVGL的日历控件有以下功能突出显示当天突出显示任何用户定义的日期显示日期名称单击按钮进入下 ...
自己设置假期的日历控件_在假期旅行时使用PC娱乐自己
自己设置假期的日历控件 Staying connected may be hard no matter what network you are on, and in flight Wi-Fi isn ...
element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
SAP UI5的calendar 日历控件
Created by Wang, Jerry, last modified on Oct 09, 2015
java自定义日历控件_【无私分享】修订版干货！！！一个炫酷的自定义日历控件，摆脱日历时间选择烦恼，纯福利~...
可能不少的小伙伴都有看楼主昨天发的自定义日历控件,虽然实现功能不多,但也还算将就吧. 但是看了的小伙伴就很心急了,说楼主上传到gitHub的东西有问题,楼主下载来看了看,基本都没问题吧,没弄好的小伙伴 ...

element-ui calendar 日历控件实现编辑假期功能以及样式修改

1.日历控件html

2.在data数据中定义两个参数：

2.设置样式

element-ui calendar 日历控件实现编辑假期功能以及样式修改相关推荐

最新文章

热门文章