vue日历热力图简单使用以及踩坑

踩坑地方挺多，一个是参数，一个是开始日期和结束日期

安装

npm install --save vue-calendar-heatmap

main.js

import VueCalendarHeatmap from 'vue-calendar-heatmap'
Vue.use(VueCalendarHeatmap);

vue

<calendar-heatmap
        @click.native="handleCellClick"
        :values="rili"
        :end-date="startDate"
        :start-date="endDate"></calendar-heatmap>

js

return {
  dataForm2: { // 表单数据对象
    department_id: '', // 部门 ID
    year:'2025',
  },
  startDate:'2026-01-01',
  endDate:'2026-12-01',
  rili:[],
}

注意如果要展示25年，开始和结束日期就需要多加一年，否则老是显示偏的日历，鬼知道为啥

rili格式：date是String类型

[
{date:'2025-01-01',count:1},
{date:'2025-01-02',count:1},
...]

点击，可以点击小格子，但获取不到小格子的里的日期参数，

 handleCellClick(event   ) {
       console.log(event.target )
    },

java随机数测试
public int RandomIntegerGenerator() {

        Random random = new Random();
        int min = 1;
        int max = 100;
        int randomNumber = random.nextInt(max - min + 1) + min;
        return randomNumber;

    }