打卡/簽到/日歷，日歷數據，樣式前端處理，后端只需要提供打卡日期即可，先看結果是不是你想要的，其實稍加改動可以廣泛應用。不要嫌棄樣式哦～

打卡

1、首先來看結構

{{ '

{{ year }}年{{ month }}月

{{ '>' }}

• 日
• 一
• 二
• 三
• 四
• 五
• 六

• {{ value }}

  {{ '休' }}

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;

}

}

}

},

}

};

總結

以上是生活随笔為你收集整理的vue打卡日历_打卡日历,日历前端实现，日历特殊标识后端提供（Vue）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。