vue element calendar生成日历

最近，项目上用到element的calendar功能，我看了一下在element官方网站上https://element.eleme.cn/#/zh-CN/component/calendar的解释比较少，所以今天记录一下，我们项目的需求是周六日和休假背景色要和日常区分开，日期里面可以添加内容，自己先写了一个实例，具体内容还要请求后台数据，废话不多说直接上代码：

<template><div style="position:absolute;"><div class="app-container check-calendar"><el-date-picker v-model="value" type="month" :clearable="false" value-format="yyyy-MM" placeholder="请选择月份"@change="loadAtten()"class="calendarInput"/><el-calendar id="calendar" v-model="value" :first-day-of-week="7"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><templateslot="dateCell"slot-scope="{date, data}"><!--自定义内容--><div class="calendarDiv" @click="calendarOnClick(data)" ><div v-if="brightDate.indexOf(data.day) != -1" class="item"><span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span><span v-for="(item,index) in calendarData" :key='index'><div v-if="item.startDate.indexOf(data.day) != -1"><ul><li>{{item.planName}}</li><li>{{item.planLocation}}</li></ul></div></span></div><!-- 周六、周日添加背景颜色 --><div v-else-if="new Date(data.day).getDay()==0" class="sunday"><span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span></div><div v-else-if="new Date(data.day).getDay()==6" class="Saturday"><span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span></div><div v-else  class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div></div></template></el-calendar></div></div></template><script>// 时间转换export default {data () {return {calendarData: [{ "startDate": "2022-10-11","planName": "看电影","planLocation": "去看电影"},{ "startDate": "2022-10-12","planName": "公园野炊","planLocation": "去公园野炊"},{ "startDate": "2022-10-13","planName": "看星星","planLocation": "去看星星"},{ "startDate": "2022-10-14","planName": "看星星","planLocation": "去看星星"},{ "startDate": "2022-10-15","planName": "看月亮","planLocation": "去看月亮"}],value: "",date:new Date(),newgetDate:[],newgetMonth:[],newgetYear:[],newresDate:[],resData:[]}},computed: {// 时间高亮的数组brightDate () {let ary = []for (let i in this.calendarData) {ary.push(this.calendarData[i].startDate)}return ary}},created(){this.nowday();this.$nextTick(() => {// 点击上个月let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');prevBtn1.addEventListener('click',() => {this.newgetAtten(this.dateFormat('YYYY-mm-dd',this.value));})// 点击今天let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');prevBtn2.addEventListener('click',() => {this.newgetAtten(this.dateFormat('YYYY-mm-dd',this.value));})// 点击下个月let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');prevBtn3.addEventListener('click',() => {this.newgetAtten(this.dateFormat('YYYY-mm-dd',this.value));})})},methods: {loadAtten(){this.newnowday();this.newgetAtten(this.newresDate)},// 日期nowday(){var d = this.date;this.newgetYear = d.getFullYear();this.newgetMonth = d.getMonth() + 1;this.newgetDate = d.getDate();this.newresDate = this.newgetYear + "-" + (this.newgetMonth < 10 ? String("0" + this.newgetMonth) : this.newgetMonth) + "-" + (this.newgetDate < 10 ? String("0" + this.newgetDate) : this.newgetDate)this.newgetAtten(this.newresDate)},//新日期newnowday(){this.newresDate = this.value + "-" + "01"},// 考勤newgetAtten(currdate){console.log('currdate',currdate)},//点击事件calendarOnClick(date){console.log(date)},   dateFormat(fmt, date) {let ret = "";date = new Date(date);const opt = {'Y+': date.getFullYear().toString(), // 年'm+': (date.getMonth() + 1).toString(), // 月'd+': date.getDate().toString(), // 日'H+': date.getHours().toString(), // 时'M+': date.getMinutes().toString(), // 分'S+': date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加，必须转化成字符串}for (let k in opt) {ret = new RegExp('(' + k + ')').exec(fmt)if (ret) {fmt = fmt.replace(ret[1],ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'))}}return fmt},}}</script><style scoped>.calendarInput{position:absolute;top:5px; left:120px;}.calendar-day{width: calc(100% - 16px); height: calc(100% - 16px); padding: 8px;}.calendarDiv{width:100%;height:100%;}.item{ width: calc(100% - 16px); height: calc(100% - 16px); padding: 8px;background:rgba(255, 240, 240, 1);}.item2{ width: calc(100% - 16px); height: calc(100% - 16px); padding: 8px;background:#fff;}.sunday{width: calc(100% - 16px); height: calc(100% - 16px); padding: 8px;background:rgba(255, 240, 240, 1);}.Saturday{width: calc(100% - 16px); height: calc(100% - 16px); padding: 8px;background:rgba(255, 240, 240, 1);}</style><style>.el-calendar-table .el-calendar-day{padding: 0px !important;}</style>

参考代码：https://blog.csdn.net/weixin_42146585/article/details/124381737

vue element calendar生成日历相关推荐

Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
vue+element+qrcode 生成二维码
今天做项目遇到了一个需求,就是管理后台生成签到的二维码,app端扫码获取培训班.班级.课程等等,然后就想到了qrcode. vue项目使用qrcodejs2生成二维码 1,导入第三方插件 npm in ...
vue+element 动态生成二维码并选择批量打印表格内容
下载生成二维码的插件(vue-qr) vue-qr npm install vue-qr --save 下载打印库(printJS) PrintJS npm install print-js --sa ...
vue vant Calendar组件日历开始时间结束时间的范围控制时间戳标准时间转换获得月份的最后一天
功能: 开始时间范围选择: 最小时间:去年的今天最大时间:当前时间结束时间范围选择: 最小时间:开始时间最大时间: 开始时间月份的最后一天比如:当前时间2021-07-24,开始时间选择范围就 ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）
一.点击文本框,选择日期,把日期赋值到文本框中. 二.日期组件使用 1.安装vue2-datepick npm install vue2-datepick --save 2.初始化,在main.js中 ...
Element UI 自定义日历
Element UI 自定义日历代码示例 HTML部分 <template><el-calendar ref="calendar"><templat ...

vue element calendar生成日历

vue element calendar生成日历相关推荐

最新文章

热门文章