日歷的功能，我們會經常用到，且邏輯比較復雜，小算法較多，花了半天時間寫了個，特此詳記。

先貼圖

功能闡述：返回本月不多說，設置工作日和節假日是為了公司制度需要，后臺會有假日表來記錄。

為了適應于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$wyw2q2k`return `${y}-${m}-$wyw2q2k` }, 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 日歷的資料請關注好吧啦網其它相關文章！