打卡日历,日历前端实现，日历特殊标识后端提供（Vue）
2019-11-07 本文已影响0人
深情的白杨
打卡/签到/日历，日历数据，样式前端处理，后端只需要提供打卡日期即可，先看结果是不是你想要的，其实稍加改动可以广泛应用。不要嫌弃样式哦～
打卡
1、首先来看结构
<div class="calendar">
<div class="ym">
<!--后一个月按钮-->
<i class="prev" @click="prevMonth">{{ '<' }}</i>
<!-- 今天的年/月，如图显示的2019年11月 -->
<span class="currentData">{{ year }}年{{ month }}月</span>
<!--前一个月按钮-->
<i class="next" @click="nextMonth">{{ '>' }}</i>
</div>
<ul class="thead">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="data">
<li v-for="(value, key) in calList" :key="key" :class="{active:value==today}">
<!--展示日期-->
<span class="day">{{ value }}</span>
<span class="pro" v-if="showProgrssStatus(value) === 0">{{ '休' }}</span>
</li>
</ul>
</div>
2、样式
有好看的直接别看这个了，写的有点啰嗦
.calendar{
background: #FFF;
position: relative;
width: 670px;
height: auto;
margin: 2px auto;
border-radius: 2px;
font-family: "PingFangSC-Regular";
overflow: hidden;
.ym{
padding: 40px 0 30px;
font-size: 36px;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
.prev{
width: 20px;
height: 30px;
background-size: 100% 100%;
margin-left: 17px;
}
.currentData{
width: 200px;
font-family: PingFangSC-Medium;
font-size: 32px;
color: #333;
}
.next{
width: 20px;
height: 30px;
background-size: 100% 100%;
margin-right: 17px;
}
}
ul.thead{
width: 100%;
display: table;
padding-bottom: 36px;
li{
width: 14.28%;
height: 40px;
text-align: center;
font-size: 28px;
float: left;
font-family: PingFangSC-Regular;
color: #888;
span{
font-size: 22px;
}
}
}
#data{
margin-top: 0;
li{
width: 14.28%;
height: 70px;
text-align: center;
float: left;
span.day{
font-size: 28px;
height: 28px;
font-family: PingFangSC-Regular;
color: #A3A3A1;
margin-bottom: 4px;
}
img{
width: 32px;
height: 32px;
display: block;
margin: 0 auto;
background-size: cover;
}
span{
font-size: 22px;
display: block;
color: #ccc;
}
.pro {
font-size: 22px;
color: #CCC;
margin-top: 12px;
}
}
li.active{
color: #FD810B;
span.pro{
font-size: 22px;
color: #FD810B;
margin-top: 12px;
}
}
}
}
3、JS逻辑处理
export default {
data() {
return {
year: '', // 当前年份
month: '', // 当前月份
today: 0, // 当前日期
calList: [], // 日历数组
progressData: [], // 日历中的特殊表识
};
},
mounted() {
this.getCalendar();
},
methods: {
getCalendar(cYear, cMonth) {
let calendarArr = [];
let myDate = new Date();
let year = cYear || this.year ? this.year : myDate.getFullYear();
let month = cMonth || this.month ? this.month : (myDate.getMonth() + 1);
let today = myDate.getDate();
this.year = year;
this.month = month;
this.today = today;
let firstday = new Date(year, (month -1), 1).getDay();//当月第一天是周几
let days = new Date(year,month, 0).getDate();//当月有多少天+1
for (let i=0; i < days; i++) {
calendarArr[i] = i+1;
}
for (let j=0; j < firstday; j++) { // 日 一 二 三 四 五 六 当月首日前位置补‘’
calendarArr.unshift('');
}
// 获取日历的行数
let len = calendarArr.length;
let line = Math.ceil(len / 7);
for (let k = 0; k < line * 7 - len; k++) { // 日 一 二 三 四 五 六 当月最后一日后位置补‘’
calendarArr.push('');
}
this.calList = calendarArr;
// '' '' '' '' '' '' 1 当月首日前位置补‘’
// 2 3 4 5 6 7 8
// 9 10 11 12 13 14 15
// 16 17 18 19 20 21 22
// 23 24 25 26 27 28 29
// 30 31 '' '' '' '' '' 当月最后一日后位置补‘’
// 调用接口，获取需要显示的数据
// eg：2019年11月7日休息，status为0的才会显示
this.progressData = [
{
day: 7,
month: 11,
year: 2019,
status: 0
}
];
},
// 上一个月按钮点击
prevMonth () {
this.progressData = [];
this.month--;
if (this.month < 1) {
this.month = 12;
this.year--;
}
this.getCalendar(this.year, this.month);
},
// 下一个月按钮点击
nextMonth () {
this.progressData = [];
this.month++;
if (this.month > 12) {
this.month = 1;
this.year++;
}
this.getCalendar(this.year,this.month);
},
// 计算日历中每日任务的状态
showProgrssStatus (value) {
for (let item in this.progressData) {
if (this.progressData[item].day === value && this.progressData[item].month === this.month && this.progressData[item].year === this.year) {
if (this.progressData[item].done_time >= this.progressData[item].all_time) {
return 1;
} else {
return this.progressData[item].status;
}
}
}
},
}
};
