tnbapp/src/views/my/Calendar.vue

<template>
  <div>
    <el-row>
      <el-col :md="20">
        <el-row>
          <h2>我的日历</h2>
        </el-row>
        <el-row>
          <calendar-heatmap :max="10" :values="values" :end-date="endDate" />
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue'
import { CalendarHeatmap } from 'vue-calendar-heatmap'
import { getHeatmap } from '@/api/im'

Vue.component('calendarHeatmap', CalendarHeatmap)
export default {
  name: 'Calendar',
  data() {
    return {
      values: [
        { date: '2018-9-22', count: 6 },
        { date: '2018-9-23', count: 5 },
        { date: '2018-9-24', count: 4 },
        { date: '2018-9-25', count: 3 },
        { date: '2018-9-26', count: 2 },
        { date: '2018-9-27', count: 1 },
        { date: '2018-9-28', count: 7 },
        { date: '2018-9-29', count: 8 },
        { date: '2018-9-30', count: 9 }
      ],
      endDate: '2019-10-22'
    }
  },
  created() {
    const path = this.$route.path
    var title = '我的消息'
    if (path.endsWith('/send')) {
      title = '发出的消息'
    } else if (path.endsWith('/receive')) {
      title = '收到的消息'
    } else if (path.endsWith('/private')) {
      title = '私信'
    }

    document.title = title
    console.log(new Date())
    getHeatmap().then(resp => {
      if (resp.code === 0) {
        this.values = resp.data
        this.endDate = this.getYearMonthDay()
      }
    })
  },
  methods: {
    getYearMonthDay() {
      const date = new Date()
      const year = date.getFullYear().toString().padStart(4, '0')
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return year + '-' + month + '-' + day
    }
  }
}
</script>