用vue设计一个日历表

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。

先贴图

功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。

为了适应于vue框架，很多jquery的方法用不上，例如addClass及removeClass，所以可能某些地方做的比较繁琐。

<template> <div> <div class='date'> <!-- 年份 月份 --> <div class='month'> <i @click='pickPre(currentYear,currentMonth)'></i> <i>{{ currentYear }} 年 {{ currentMonth }} 月</i> <i @click='pickNext(currentYear,currentMonth)'></i> </div> <!-- 星期 --> <ul class='weekdays'> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li style='color:#0A0A0A'>六</li> <li style='color:#0A0A0A'>日</li> </ul> <!-- 日期 --> <div class='bodyDiv'> <ul v-for='(value,index1) in daysUL'> <li @click='pick(day,index+index1*7)' v-for='(day, index) in value' : > <!--本月--> <span v-if='day.getMonth()+1 != currentMonth' :class='{’selected’:isSelected[index+index1*7]}'>{{ day.getDate() }}</span> <span v-else :class='{’selected’:isSelected[index+index1*7]}'> <!--今天--> <span v-if='day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()' class='active'>{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </div> <hr /> </div> <div class='button'> <div><el-button type='primary' size='large' @click='returnNow()'>返回本月</el-button></div> <div><el-button type='primary' size='large' @click='setRestOrWork(’R’)'>设置为节假日</el-button></div> <div><el-button type='primary' size='large' @click='setRestOrWork(’W’)'>设置为工作日</el-button></div> <div><el-button type='primary' size='large' @click='cancel()'>取消</el-button></div> </div> </div></template><script> import { calendarMsgService } from ’./CalendarMsgService’ export default { name: ’date’, data () { return {currentYear: 1970, // 年份currentMonth: 1, // 月份currentDay: 1, // 日期currentWeek: 1, // 星期firstWeek:1,days: [],daysUL:[],params:{ selectDay:’’, type:’’},isSelected:[],isBan:[],isXiu:[],restDays:{ year:’’, month:’’, day:’’, resttype:’’, restdate:’’},restDaysList:[],banList:[],xiuList:[],selectIndex:’’ } }, created () { this.initData(null) }, methods: { //格式化日期 formatDate (year, month, day) {const y = yearlet m = monthif (m < 10) m = `0${m}`let d = dayif (d < 10) d = `0${d}`return `${y}-${m}-${d}` }, initData (cur) {debugger;let date = ’’if (cur) { date = new Date(cur)} else { date = new Date()}this.currentDay = date.getDate() // 今日日期 几号this.currentYear = date.getFullYear() // 当前年份this.currentMonth = date.getMonth() + 1 // 当前月份this.currentWeek = date.getDay() // 1...6,0 // 今天是星期几//当前月的第一天是星期几date.setDate(1);this.firstWeek = date.getDay();if (this.firstWeek === 0) { this.firstWeek = 7;}const str = this.formatDate(this.currentYear, this.currentMonth, 1)// 今日日期 年-月-日this.days.length = 0// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 42- this.firstWeekfor (let i = this.firstWeek - 1; i >= 0; i -= 1) { const d = new Date(str) d.setDate(d.getDate() - i) this.days.push(d)}//处理1号是星期天为 7 的情况， 为7天就直接放在daysUL里if (this.days.length % 7 === 0){ this.daysUL.push(this.days); this.days = [];}for (let i = 1; i <= 42 - this.firstWeek; i += 1) { const d = new Date(str); d.setDate(d.getDate() + i); this.days.push(d); //一个 days 就是一行7天 daysUL 就是个数组，里面有六个days 就是六行42天 if (this.days.length % 7 === 0){ this.daysUL.push(this.days); this.days = []; //清空重新存放天数 }}//调后台接口，获取当前年，当前月的 班休时间calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => { if (res.code === 0){ debugger; this.restDaysList = res.content; this.dealResult(this.currentYear,this.currentMonth); }}) }, setRestOrWork(type) {if (this.onlySelect()) { this.params.type = type; debugger; calendarMsgService.addRestDays(this.params).then(res => { if (res.code === 0) { this.$message({message: ’设置成功！’,type: ’success’ }) if (type == ’R’){this.isXiu[this.selectIndex] = true; } if (type == ’W’){this.isBan[this.selectIndex] = true; } } else { this.$message({message: res.msg,type: ’error’ }) } this.params.selectDay = ’’; this.params.type = ’’; })} }, cancel() {if (this.onlySelect()) { calendarMsgService.cancelRestDays(this.params).then(res => { if (res.code === 0) { this.$message({message: ’取消成功！’,type: ’success’ }) this.isXiu[this.selectIndex] = false; this.isBan[this.selectIndex] = false; } else { this.$message({message: res.msg,type: ’error’ }) } this.params.selectDay = ’’; this.params.type = ’’; })} }, // 上一??月 传入当前年份和月份 pickPre (year, month) {this.daysUL = [];this.isSelected = [];const d = new Date(this.formatDate(year, month, 1))d.setDate(0)this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => { if (res.code === 0){ debugger; this.restDaysList = res.content; this.dealResult(this.currentYear,this.currentMonth); }}) }, // 下一??月 传入当前年份和月份 pickNext (year, month) {this.daysUL = [];this.isSelected = [];const d = new Date(this.formatDate(year, month, 1))d.setDate(42)this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));//当点击下个月的时候，才会去拿该月的休息或者工作日的日期，而不是一下子都拿出来calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => { if (res.code === 0){ debugger; this.restDaysList = res.content; this.dealResult(this.currentYear,this.currentMonth); }}) }, //算法 dealResult(currentYear,currentMonth){debugger;this.banList = []; //把当前月的 工作日 放在一起this.xiuList = []; //把当前月的 休息日 放在一起this.isBan = []; //设置标识，来确定用什么样的背景图this.isXiu = [];let zhouji = new Date(this.formatDate(currentYear, currentMonth, 1)).getDay(); //被查找的月份 1 号是星期几if (zhouji === 0){ // 0 就是星期天 zhouji = 7;}for (let i = 0; i<this.restDaysList.length;i++){ this.restDays = this.restDaysList[i]; if (this.restDays.resttype === ’W’) { let ban = this.restDays.day - 1 + (zhouji - 1);//重要算法，算出班日，在几号位 this.banList.push(ban); } if (this.restDays.resttype === ’R’){ let xiu = this.restDays.day - 1 + (zhouji - 1);//重要算法，算出休息日，在几号位 this.xiuList.push(xiu); }}for (let m = 0; m < 42; m++) { // banlist 里面放置的都是在日历上处于几号位，而不是工作日的日期， let nothave = true; // 所以得把这些位置号拎出来，给它们于不同的样式 for (let k = 0; k < this.banList.length; k++) { if (m == this.banList[k]) { this.isBan.push(true); nothave = false; break; } } if (nothave) { this.isBan.push(false); }}for (let n = 0; n < 42; n++) { // 同上，来处理休息日 let nothave = true; for (let k = 0; k < this.xiuList.length; k++) { if (n == this.xiuList[k]) { this.isXiu.push(true); nothave = false; break; } } if (nothave) { this.isXiu.push(false); }} }, returnNow(){this.daysUL = [];this.initData(null); }, // 当前选择日期 pick (date,index) {debugger;this.selectIndex = index;this.isSelected = [];this.params.selectDay = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate());for (let i = 0; i < 42; i++) { if (index == i) { this.isSelected.push(true); continue; } this.isSelected.push(false);} }, onlySelect(){debugger;if(this.params.selectDay === ’’){ this.$message({ message: ’请选择日期’, type: ’warning’ }) return false;}return true; } }, }</script><style scoped> .date { height: 150px; width:1000px; color: #333; float: left; } .button{ float: left; margin-left:110px; margin-top:120px; } .button>div{ margin-top:70px; } .month { font-size: 24px; text-align: center; margin-top: 20px; } .weekdays { background-color: #20A0FF; opacity: 0.6; display: flex; font-size: 28px; margin-top: 20px; } .days { display: flex; } li { flex: 1; font-size: 35px; width:50px; list-style-type:none; text-align: center; margin-top: 5px; line-height: 60px; cursor:pointer; } .selected{ display: inline-block; width: 60px; height: 60px; color: #fff; border-radius: 70%; background-color: #1E90FF; } .ban{ background-image: url(image/ban.jpg); } .xiu{ background-image: url(./image/xiu.jpg); background-repeat: no-repeat; } .active { display: inline-block; width: 60px; height: 60px; color: #fff; border-radius: 50%; background-color: #324057; } i{ margin-right:30px; cursor:pointer } .other-month { color: #EEC591; }</style>

以上就是用vue设计一个日历表的详细内容，更多关于vue 日历的资料请关注好吧啦网其它相关文章！