Vue.js实现日历功能

257 阅读 0 评论 170 点赞

我是靠谱客的博主生动灰狼，最近开发中收集的这篇文章主要介绍Vue.js实现日历功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了Vue.js实现日历功能的具体代码，供大家参考，具体内容如下

Github

功能需求

使用 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="scss">
.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: #f29e39;
            }
            &.中度 {
              background: #da555d;
            }
            &.重度 {
              background: #b9377a;
            }
            &.严重 {
              background: #881326;
            }
          }
        }
      }
    }
  }
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。