简单日历控件
<template>
<div class="calendar-box">
<div class="calendar-box-selmonth">
<div class="sel-time" @click="lastMonth">{{ lef }}</div>
{{ year }}年{{ month | monthFilter }}月
<div class="sel-time" @click="nextMonth">></div>
</div>
<div class="calendar-box-week">
<div class="week-item" v-for="item in week" :key="item">{{ item }}</div>
</div>
<div class="calendar-box-day">
<div class="day-item" v-for="(d, index) in days" :key="index">
<div :class="['day-item-d', typeof d == 'string' ? 'nocolor' : '',typeof d != 'string' && nowOn && d == nowD?'now-day':'']">
{{ d }}
<div class="d-bit-min" v-show="typeof d != 'string' && d == 11"></div>
<div class="d-bit-mid" v-show="typeof d != 'string' && d == 12"></div>
<div class="d-bit-max" v-show="typeof d != 'string' && d == 13"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
nowY: new Date().getFullYear(),
nowM: new Date().getMonth() + 1,
nowD: new Date().getDate(),
nowOn: false,
week: ["日", "一", "二", "三", "四", "五", "六"],
days: [],
monthDays: {
1: 31,
2: 28,
3: 31,
4: 30,
5: 31,
6: 30,
7: 31,
8: 31,
9: 30,
10: 31,
11: 30,
12: 31,
},
lef: "<",
leapYear: false,
};
},
filters: {
monthFilter(e) {
if (e < 10) {
return "0" + e;
} else {
return e;
}
},
},
mounted() {
this.leapYear = this.isLeapYear();
this.selyearmonth(1);
},
methods: {
lastMonth() {
let m = this.month - 1;
if (m <= 0) {
this.month = 12;
this.year = this.year - 1;
} else {
this.month = m;
}
this.selyearmonth(1);
},
nextMonth() {
let m = this.month + 1;
if (m > 12) {
this.month = 1;
this.year = this.year + 1;
} else {
this.month = m;
}
this.selyearmonth(2);
},
//平闰年
isLeapYear() {
return (
(0 == this.year % 4 && this.year % 100 != 0) || this.year % 400 == 0
);
},
selyearmonth(n) {
let off = this.isLeapYear();
let firstweek = new Date(this.year + "/" + this.month + "/01").getDay();
let lastDay = 0;
this.days = [];
if (this.nowY == this.year && this.nowM == this.month) {
this.nowOn = true;
} else {
this.nowOn = false;
}
if (off) {
this.monthDays[2] = 29;
} else {
this.monthDays[2] = 28;
}
if (n == 1) {
if (this.month - 1 < 0) {
lastDay = this.monthDays[12];
} else {
lastDay = this.monthDays[this.month - 1];
}
} else {
if (this.month + 1 > 12) {
lastDay = this.monthDays[1];
} else {
lastDay = this.monthDays[this.month + 1];
}
}
//上月剩余
for (var i = lastDay - firstweek + 1; i <= lastDay; i++) {
this.days.push(i.toString());
}
//添加当月
for (var j = 1; j <= this.monthDays[this.month]; j++) {
this.days.push(j);
}
//补足剩余
let ns = this.days.length % 7 ? 7 - (this.days.length % 7) : 0;
for (var k = 1; k <= ns; k++) {
this.days.push(" ");
}
},
},
};
</script>
<style scoped lang='scss'>
.calendar-box {
width: 686px;
background: #fff;
margin: 0 auto;
border-radius: 20px;
.calendar-box-selmonth {
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 400;
color: #333333;
height: 120px;
.sel-time {
padding: 0 20px;
}
}
&-week {
display: flex;
align-items: center;
// justify-content: space-between;
font-size: 28px;
font-weight: 400;
color: #dddddd;
.week-item {
width: 98px;
height: 66px;
text-align: center;
}
}
&-day {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.day-item {
display: flex;
align-items: center;
justify-content: center;
width: 98px;
height: 66px;
border-radius: 50%;
text-align: center;
font-size: 28px;
line-height: 68px;
font-weight: 400;
color: #333333;
// margin-top: 10px;
&-d {
position: relative;
width: 66px;
height: 66px;
border-radius: 50%;
text-align: center;
font-size: 28px;
line-height: 68px;
font-weight: 400;
color: #333333;
.d-bit-min {
position: absolute;
width: 10px;
height: 10px;
background: #f6cd45;
border-radius: 50%;
bottom: 6px;
left: 28px;
}
.d-bit-mid {
position: absolute;
width: 10px;
height: 10px;
background: #58c0b2;
border-radius: 50%;
bottom: 6px;
left: 28px;
}
.d-bit-max {
position: absolute;
width: 10px;
height: 10px;
background: #ec746a;
border-radius: 50%;
bottom: 6px;
left: 28px;
}
}
.now-day{
background: #57BDAF;
color: #fff;
}
.nocolor {
color: #ddd;
}
}
}
}
</style>
