日曆的功能，咱們會常常用到，且邏輯比較複雜，小算法較多，花了半天時間寫了個，特此詳記。javascript
先貼圖vue
功能闡述：返回本月很少說，設置工做日和節假日是爲了公司制度須要，後臺會有假日表來記錄。java
爲了適應於vue框架，不少jquery的方法用不上，例如addClass及removeClass，因此可能某些地方作的比較繁瑣。jquery
<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>
重要的點，都已經註釋好。(第一篇，博客從博客園遷移至此)算法