vue實現日曆樣式

最近，項目組要求仿照企業微信的打卡功能，實現報工的日曆展示功能，看了很多資料，現在此自己總結一下思路，以做記錄。

首先看界面效果：

我先描述一下思路：首先判斷當前月份一共有幾天total，然後找到當月的1號是周幾，找到在日曆中顯示的位置，然後依次往數組裏添加對象，有幾天就添加幾條數據。

一、頁面樣式佈局

<template>
  <div class="date-page">
    <div class="calenders">
      <div class="date-header">
        <div class="pre-month" @click="preMonthClick()">
          <i class="iconfont icon-zuobianjiantou font20"></i>
        </div>
        <div class="show-date">{{year}} 年 {{month}} 月</div>
        <div class="pre-month" @click="nextMonthClick()" v-if="show">
          <i class="iconfont icon-youbianjiantou font20"></i>
        </div>
      </div>
      <div class="date-content">
        <div class="week-header">
          <div v-for="item in ['日','一','二','三','四','五','六']" :key="item">{{ item }}</div>
        </div>
      
        <div class="week-day">
          <div
            class="every-day"
            :class="{actived:index == isActive}"
            v-for="(showDay,index) in showData"
            :key="index"
            @click="detailClick(showDay,index)"
          >
            <div :class="['day',isWeekDay?'circle-color-blue':'']">{{showDay}}</div>
            <div v-if="showDay!==''" class="cicle" :class="colorClass(1)">•</div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div>
        <div class="detail-title">當天報工</div>
        <div class="line"></div>
      </div>

      <!-- <div>
        <div class="detail-bottom" v-for="(item,index) in showDayDeatile.datePeriods" :key="index">
          <div class="left" style="display:inline-block">{{item.jobTime}}</div>
          <div class="right" style="float:right;display:inline-block">{{item.state}}</div>
        </div>
        <div class="line"></div>
        <div class="detail-bottom">
          <div
            class="right"
            style="float:right;font-size:14px;font-weight:bold;right:0.2rem"
          >審批人:{{showDayDeatile.appRover}}</div>
        </div>
      </div>-->
      <div style="height:60px">
        <div class="detail-bottom">
          <div class="left" style="display:inline-block">上午 • 已報工</div>
          <div class="right" style="float:right;display:inline-block">待審覈</div>
        </div>
        <div class="right" style="float:right;font-size:14px;right:0.2rem">審批人 : 李四</div>
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      year: "",
      month: "",
      today: "",
      calendarDateList: [],
      showData: [],
      isActive: -1,
      show: false,
      showDayDeatile: {},
      circleColor: 0, //圓點的顏色，0-白色，1-紅色，2-橙色
      isWeekDay: false
    };
  },

二、獲的當前的日期，初始化數據

 getToday() {
      let date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.today = date.getDate();//獲取這是周幾
      //初始化數據
      this.getMonthDays(this.year, this.month - 1);
      //得到當月今天的位置index
      let targetDay = new Date(this.year, this.month - 1, 1).getDay();
      let index = this.today + targetDay - 1;
      this.isActive = index;
    },

getMonthDays(year, month) {
      // 定義每個月的天數，如果是閏年第二月改爲29天
      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        daysInMonth[1] = 29;
      }
      // 當月第一天爲周幾
      let targetDay = new Date(year, month, 1).getDay();
      // console.log("targetDay:" + targetDay);
      let calendarDateList = [];
      let preNum = targetDay;
      let nextNum = 0;
      if (targetDay > 0) {
        // 當前月份1號前的自然周剩餘日期，置空
        for (let i = 0; i < preNum; i++) {
          calendarDateList.push("");
        }
      }
      for (let i = 0; i < daysInMonth[month]; i++) {
        // 正常顯示的日期
        calendarDateList.push(i + 1);
      }
      // 當前月份最後一天的自然周剩餘日期，置空
      nextNum = 6 - new Date(year, month + 1, 0).getDay(); 
      for (let i = 0; i < nextNum; i++) {
        calendarDateList.push("");
      }
      this.showData = calendarDateList;
      // console.log("showDate:" + JSON.stringify(this.showData));
      return calendarDateList;
    }

這樣，就可以顯示出來基本的日曆樣式。

三、點擊前一個月按鈕

 preMonthClick() {
      this.isActive = -1;
      this.show = true;
      if (this.month === 1) {
        this.month = 12;
        this.year = this.year - 1;
      } else {
        this.month = this.month - 1;
      }
      this.getMonthDays(this.year, this.month - 1);
    },

四、點擊下一個月按鈕

nextMonthClick() {
      this.isActive = -1;
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (this.year == year) {
        this.month = this.month + 1;
        if (this.month < month) {
          this.show = true;
        } else {
          this.show = false;
          this.getMonthDays(this.year, this.month - 1);
          let targetDay = new Date(this.year, this.month - 1, 1).getDay();
          let index = this.today + targetDay - 1;
          this.isActive = index;
        }
      } else if (this.year < year) {
        this.show = true;
        if (this.month === 12) {
          this.month = 1;
          this.year = this.year + 1;
        } else {
          this.month = this.month + 1;
        }
      }
      this.getMonthDays(this.year, this.month - 1);
    } 

因爲主要是思路，所以沒有上傳樣式代碼。
如有需要，可自行下載。