用vue設計一個日曆表
阿新 • • 發佈：2020-12-04
日曆的功能，我們會經常用到，且邏輯比較複雜，小演算法較多，花了半天時間寫了個，特此詳記。
先貼圖
功能闡述：返回本月不多說，設定工作日和節假日是為了公司制度需要，後臺會有假日表來記錄。
為了適應於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,1))
d.setDate(0)
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
calendarMsgService.getRestDays({currentYear:this.currentYear,// 下一個月 傳入當前年份和月份
pickNext (year,1))
d.setDate(42)
this.initData(this.formatDate(d.getFullYear(),1));
//當點選下個月的時候，才會去拿該月的休息或者工作日的日期，而不是一下子都拿出來
calendarMsgService.getRestDays({currentYear:this.currentYear,//演算法
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 日曆的資料請關注我們其它相關文章！