本文例項為大家分享了.實現日曆功能的具體程式碼，供大家參考，具體內容如下

功能需求

使用 Vue.js 實現指定年月的日曆表，配合後臺介面資料，新增對應日期的空氣質量描述等資訊。後臺傳遞當月空氣質量指數的資料，前端生成日曆表後將空氣質量指數新增到對應日期上。

空氣質量資料示例：

data.json

{
  "code": 200,"msg": "","data": [{
      "time": "2020-08-01","kqzl": "優"
    },{
      "time": "2020-08-02","kqzl": "良"
    },{
      "time": "2020-08-03","kqzl": "良"
    }
  ]
}

實現方法

<template>
  <div id="app">
    <h1 style="text-align:center;">
      2020-08</h1>
    <div class="calendar-container">
      <div class="calendar-week">
        <div class="cw-inner">
          <div class="cw-item"
               :style="{width: setItemWidth}"
               v-for="(item,index) of week"
               :key="index">
            {{item}}
          </div>
        </div>
      </div>
      <div class="calendar-day">
        <div class="cd-list"
             v-for="(item,index) of day"
             :key="index">
          <div class="cl-item"
               :style="{width: setItemWidth}"
               v-for="(child,index) of item"
               :key="index"
               :class="[{has: child}]">
            <div class="ci-inner"
                 v-if="child">
              <span>{{child.date}}</span>
              <span v-if="child.text"
                    class="aqi"
                    :class="child.text.kqzl">
                {{child.text.kqzl}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kqzlData from './assets/data.json' // 空氣質量資料
export default {
  name: 'app',data() {
    return {
      week: [
        '星期一','星期二','星期三','星期四','星期五','星期六','星期日',],day: [],}
  },computed: {
    setItemWidth() {
      return 100 / 7 + '%'
    },},mounted() {
    this.createCalendar(2020,8)
  },methods: {
    /**
     * @name: 格式化日期
     * @param {date}
     */
    dateFormat(date) {
      let dateArr = date.split('-')
      let mounth = dateArr[1] >= 10 ? dateArr[1] : '0' + dateArr[1]
      let day = dateArr[2] >= 10 ? dateArr[2] : '0' + dateArr[2]
      return dateArr[0] + '-' + mounth + '-' + day
    },/**
     * @name: 日期資訊
     * @param {date}
     */
    getDayInfo(date) {
      let kqzl = kqzlData.data
      let formatDate = this.dateFormat(date)
      let txt = kqzl[kqzl.findIndex(item => item.time === formatDate)]
      return txt
    },/**
     * @name: 生成日曆表
     * @param {year}
     * @param {mounth}
     */
    createCalendar(year,mounth) {
      // 某個月一共有多少天
      let allDay = new Date(year,mounth,0).getDate()
      // 某個月1號是星期幾
      let firstDay = this.judjeFirstDay(year,mounth)
      // 需要多少行來展示
      let row = Math.ceil((allDay + firstDay) / 7)
      let k = firstDay - 1
      let result = []
      let count = 1
      // 生成日曆二維陣列
      for (let i = 0; i < row; i++) {
   
 
     result[i] = new Array(7)
        do {
          if (count <= allDay) {
            result[i][k] = {
              date: count,// 根據介面匹配日期對應的資訊
              text: this.getDayInfo(year + '-' + mounth + '-' + count),}
            k++
            count++
          } else {
            break
          }
        } while (k < 7)
        k = 0
      }
      this.day = result
    },/**
     * @name: 判斷某年某月1號是星期幾
     * @param {year}
     * @param {mounth}
     */
    judjeFirstDay(year,mounth) {
      let date = new Date(year,mounth - 1,1)
      let week = date.getDay()
      let weekArr = [1,2,3,
 
4,5,6,7]
      return weekArr[week - 1]
    },}
</script>

<style lang="s">
.calendar-container {
  text-align: center;
  .calendar-week {
    margin-bottom: 4px;
    padding: 0 4px;
    color: #fff;
    .cw-inner {
      overflow: hidden;
      background: #a0a0a0;
      .cw-item {
        float: left;
        padding: 8px 0;
      }
    }
  }
  .calendar-day {
    .cd-list {
      overflow: hidden;
      .cl-item {
        float: left;
        min-height: 30px;
        box-sizing: border-box;
        padding: 4px;
        .ci-inner {
          background: #f5f5f5;
          padding: 8px 0;
          span {
            display: inline-block;
            &.aqi {
              color: #fff;
              background: #a7cf8c;
              padding: 0 4px;
              border-radius: 4px;
            }
            &.優 {
              background: #a7cf8c;
            }
            &.良 {
              background: #f7da64;
            }
            &.輕度 {
              background: eysjK#f29e39;
            }
            &.中度 {
              background: #da555d;
            }
            &.重度 {
              background: #b9377a;
            }
            &.嚴重 {
              background: #881326;
            }
          }
        }
      }
    }
  }
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。