Another cliched feature, next comes a 10,000-year calendar from zero, from layout to logic to ubiquitous clocking. The contents involved are

  • Calendar layout
  • Generation of date data
  • Change of year and year
  • Longest continuous punching date
  • Card) logic

1. Calendar layout

<template> <div class="calendar"> <! <div class="select"> <span class="select-icon select-sub" @click="changeYear(-1)"> </span> <span class="select-icon select-sub select-month" @click="changeMonth(-1)"><</span> <span>{{ currentMonth }}</span> <span class="select-icon select-add select-month" @click="changeMonth(+1)">></span> <span class="select-icon select-add" @click="changeYear(+1)"> </span> </div> <! <ul class="calendar-header"> <li v-for="(item, index) in headerData" :key="index" class="calendar-header-item"> <span>{{ item }}</span> </li> </ul> <! <div class="calendar-box"> <div class="calendar-box-item" :class="{delMark:! hasRemarkDays.includes(item) }" v-for="(item, index) in baseDateList" :key="index"> <! <div class="item-wrap" :class="{hasMarked: hasRemarkDays.includes(item) }" @click="toRemark(item, currentDate)"> <span class="item-date">{{ item ? item : "" }}</span> <span class="item-patch" v-if="isShowPatch && ! Hasremarkdays. includes(item) && item && item < currentDate"> < SPAN > <span class="item-current" V-if ="currentDate == Item ">< I ></ I ></span> <span class="item-continue" v-if=" continuemarkobj. maxDay == item"> continuous{{continuemarkobj. maxLen </span> </div> <! <span class="all-mark" V-if =" hasremarkdays. includes(item)"></span> <! -- Left and right masks, if the left side is not punched, cover; If there is no clock in, on the right cover - > < span class = "left - the mark" v - if = "index % 7 = = = 0 | |! hasRemarkDays.includes(item - 1)"></span> <span class="right-mark" v-if="index % 7 === 6 || ! hasRemarkDays.includes(item + 1)"></span> </div> </div> </div> </template>Copy the code

2. Generation of date data

Computed: {// Returns the current actual number of days, counting from Monday baseDateList() {let date = new Date(this.currentMonth); let monthFlag = date.getMonth() + 1; let yearFlag = date.getFullYear(); let currentData = date.getDay(); let dayLength = new Date(yearFlag, monthFlag, 0).getDate(); // Let dateBaseData = []; for (let i = 0; i < currentData; i++) { dateBaseData.push(0); } // For (let I = 0; i < dayLength; i++) { dateBaseData.push(i + 1); } return dateBaseData; }},Copy the code

CurrentData indicates the day of the week today, and all arrays before that are filled with 0. DayLength indicates the number of days in the month. Flex: wrap; Let it wrap automatically.

3. Changes in years and years

ChangeYear (type) {let time = new Date(this.currentMonth); changeYear(type) {let time = new Date(this.currentMonth); let year = time.getFullYear() + type; let month = time.getMonth() + 1; this.currentMonth = `${year}-${month}`; ChangeMonth (type) {let time = new Date(this.currentMonth); let year = time.getFullYear(); let month = time.getMonth() + 1; If (month === 12 && type > 0) {// year++ month = 1} else if(month === 1 && type < 0) {// 1 month, Year -- month = 12} else {// Month += type} this.currentMonth = '${year}-${month}'; },Copy the code

Introduce type, which is both the flag bit of addition and subtraction and the size of the variable.

4. Longest continuous punching date

getMaxDay() { let arr = this.hasRemarkDays; let buffChild = []; let max = []; for (let i = 0; i < arr.length; I++) {// if the subset is discontinuous, If (buffChild.length && arr[I] -buffChild [buffchild.length - 1] > 1) {Max = max.length > buffchild.length? [...max] : [...buffChild]; buffChild = []; buffChild.push(arr[i]); continue; } // If not, simply accumulate buffchild.push (arr[I]); } return max.length > buffChild.length ? [...max] : [...buffChild]; },Copy the code

Assuming Max is the largest array, Max compares and updates each successive array found. In the node, add the hasMarked style with :class=”{hasMarked: hasMarked days.includes (item)}”.

5. Date of card replacement

The card filling logic is very simple. Any date before the current date can be filled. Then, in the triggered method, the date that needs to be filled can be sent to the parent through $emit and the card filling logic will be triggered.

Conclusion: The calendar is mainly implemented by using the API of Date object in JavaScript and the classical Flex layout, and the longest continuous punch is one of the ways to implement the longest continuous subsequence of the conventional algorithm.