日历的功能,我们会经常用到,且逻辑比较复杂,小算法较多,花了半天时间写了个,特此详记。
先贴图
功能阐述:返回本月不多说,设置工作日和节假日是为了公司制度需要,后台会有假日表来记录。
为了适应于vue框架,很多jquery的方法用不上,例如addClass及removeClass,所以可能某些地方做的比较繁琐。
<template> <div> <div class="date"> <!-- 年份 月份 --> <div class="month"> <i class="el-icon-arrow-left" @click="pickPre(currentYear,currentMonth)"></i> <i>{{ currentYear }} 年 {{ currentMonth }} 月</i> <i class="el-icon-arrow-right" @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 class="days" v-for="(value,index1) in daysUL"> <li @click="pick(day,index+index1*7)" v-for="(day, index) in value" :class="[{'ban':isBan[index+index1*7]},{'xiu':isXiu[index+index1*7]}]" > <!--本月--> <span v-if="day.getMonth()+1 != currentMonth" class="other-month" :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 style="height:2px;border:none;border-top:2px dotted #185598;" /> </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 = year let m = month if (m < 10) m = `0${m}` let d = day if (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.firstWeek for (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 日历的资料请关注其它相关文章!
标签:
vue,日历,vue,设计日历
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“用vue设计一个日历表”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]