日历功能
1.日历点击选中
2.每天的状态下标
组件样式
b39bb1826ad7054915a5b12a001ef9e.png
页面部分
<div class="calendar">
<div class="title">
<div class="btn" @click="Monthchange(1)">
<van-icon name="arrow-left" />
</div>
<span>{{months}}</span>
<div class="btn" @click="Monthchange(2)">
<van-icon name="arrow" />
</div>
</div>
<ul class="weeks">
<li v-for="(v,i) in weeks" :key="i">{{v}}</li>
</ul>
<ul class="days">
<li v-for="(v,i) in days" :key="i" @click="selectDay(v.date)"
:style="i == 0?`margin-left: ${14.285 * Week}%`:''">
<div :class="v.selected?'selected':''">
{{v.text}}
<div class="bottomInfo" v-if="v.bottomInfo"></div>
</div>
</li>
</ul>
</div>
js部分
// 获取月份的每天的状态
getMettingAndDay(type) {
if (type == 1) {
var time = new Date()
} else {
var time = new Date(this.months)
}
var YY = time.getFullYear()
var MM = (time.getMonth() + 1)
MM < 10 ? MM = '0' + MM : MM
// 根据当前月份 获取当前月份的天数 是30 还是31
var num = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate()
var all_day = []
for (let i = 0; i < num; i++) {
let str = new Date(`${YY}/${MM}/${i + 1} 00:00:00`).getTime()
all_day.push(str / 1000)
}
this.$http.post(CONFIG.get_meeting_by_day, {
all_day: all_day
})
.then(res => {
if (res.data.code != 0) return this.$toast(res.data.msg)
this.daysBottomInfo = res.data.data
this.daysBottomInfo.forEach(element => {
element.day_date = element.day_date.replace(/-/g, '/')
});
this.getDayAndWeek(type)
}).catch(err => {
console.log(err)
})
},
// 获取月份对应天数与一号对应星期几
getDayAndWeek(type) {
if (type === 1) {
var time = new Date()
var YY = time.getFullYear()
var MM = (time.getMonth() + 1)
MM < 10 ? MM = '0' + MM : MM
var DD = time.getDate()
DD < 10 ? DD = '0' + DD : DD
this.months = YY + '/' + MM
this.selected = this.months + '/' + DD
this.selectDay(this.selected)
} else {
var time = new Date(this.months)
}
// 根据当前月份 获取当前月份的天数 是30 还是31
var num = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate();
var obj = {}
this.days = []
for (let i = 0; i < num; i++) {
obj.text = i + 1
obj.text < 10 ? obj.date = this.months + '/0' + obj.text : obj.date = this.months + '/' + obj.text
obj.bottomInfo = false
this.daysBottomInfo.forEach(element => {
if (obj.date === element.day_date && element.status == 1) obj.bottomInfo = true
})
obj.selected = false
if (obj.date === this.selected) obj.selected = true
this.days.push(JSON.parse(JSON.stringify(obj)))
}
// console.log(this.months, this.days)
// 根据当前月份 获取当前月份一号星期几
this.Week = new Date(time + "-1").getDay()
},
// 月份切换
Monthchange(val) {
let time = new Date(this.months)
var YY = time.getFullYear()
var MM = time.getMonth()
if (val == 1) {
if (MM) { // != 0 前一月
MM < 10 ? this.months = `${YY}/0${MM}` : this.months = `${YY}/${MM}`
} else { // 月份 == 0后切换到上前一年的12月
this.months = `${YY - 1}/12`
}
} else {
if (MM == 11) { // 月份满 11 后年份加 一 月份变成 1 月
this.months = `${YY + 1}/01`
} else { // 月份 正常 ++
(MM + 2) < 10 ? this.months = `${YY}/0${MM + 2}` : this.months = `${YY}/${MM + 2}`
}
}
this.getMettingAndDay(2); // 刷新日历
},
csss部分
.calendar {
width: 100%;
height: 6.48rem;
margin-top: 0.4rem;
padding: 0px 0.2rem;
background: #fff;
.title {
height: .88rem;
padding: 0 .3rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
.btn {
width: .5rem;
height: .5rem;
background: rgba(0, 69, 147, 0.9);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
}
}
.weeks {
display: flex;
line-height: .6rem;
font-size: 12px;
text-align: center;
li {
width: 14.285%;
}
}
.days {
display: flex;
flex-wrap: wrap;
line-height: .8rem;
font-size: 16px;
text-align: center;
li {
width: 14.285%;
height: .8rem;
position: relative;
.selected {
margin: 0 auto;
width: .8rem;
height: .8rem;
background: rgb(0, 69, 147);
border-radius: 20%;
color: #fff;
.bottomInfo {
background: #fff;
}
}
.bottomInfo {
position: absolute;
right: 0;
left: 0;
bottom: .1rem;
width: .1rem;
height: .1rem;
background: #F77200;
margin: 0 auto;
border-radius: 50%;
}
}
}
}
借鉴https://blog.csdn.net/weixin_46544600/article/details/117394859
