How to hide the future days?

[Wugensheng3]

181

I have read the issue above, but I found that I cannot find the corresponding. futrue style, so do I run the implementation now to hide future days? I use vue3 to develop,Here are the attempts I made: I have checked the style on edge,However, it is disappointing to find no difference between the future date and the current date and I have try like these:

or So I would like to ask how to hide the style of future days

[Wugensheng3]

this is the code

  import { onMounted } from 'vue';
  import CalHeatmap from 'cal-heatmap';
  import 'cal-heatmap/cal-heatmap.css';
  import Tooltip from 'cal-heatmap/plugins/Tooltip';
  import Legend from 'cal-heatmap/plugins/Legend';

  const cal = new CalHeatmap();
  const data = [
    { date: '2024-03-19', value: 3 },
    { date: '2024-03-18', value: 6 },
  ];
  console.log('data', data);

  function paintCalendar() {
    cal.paint(
      {
        data: { defaultValue: 0, source: data, x: (datum)=>new Date(datum.date), y: 'value' },
        itemSelector: '#cal-heatmap',
        range:3,
        domain: { type: 'month', sort: 'asc', label: { textAlign: 'middle' } },
        subDomain: { type: 'day', width: 15, height: 15, label: { text: 'L' }
        },
        scale: {
          color: {
            scheme: 'purples',
            type: 'linear',
            domain: [0, 1, 2, 5, 10, 20],
          },
        },
        date: {
          start:new Date('2024-01-19'),
          max:new Date(),
          highlight: [new Date()],
          timezone: 'Asia/Shanghai',
          locale:'zh',
        },
      },
      // 修正语法错误
      [
        [
          Tooltip,
          {
            // 修正语法错误
            text: (date, value, dayjsDate) => {
              return `${value}次提交 - ${dayjsDate.format(
                'YYYY-MM-DD'
              )}`;
            },
          },
        ],
        [
          Legend,
          {
            width: 40,
            itemSelector: '#legend-width',
          },
        ],
      ]
    );
  }

  onMounted(() => {
    paintCalendar();
  });
</script>

<template>
  <div id="cal-heatmap"></div>
  <div id="legend-width"></div>
</template>

<style lang="less">
.cal-heatmap.future{
  fill: rgba(255, 255, 255, 0.8);
}
</style>

[yqchilde]

我解决了这个问题

1. 创建自定义模板
2. 然后在模板里的mapping函数中渲染到自己想要的那天，（未来的时间不渲染）

I have solved this problem

1. Create a custom template
2. Then render to the desired day in the mapping function of the template (no rendering for future time)

具体代码参考：https://github.com/yqchilde/yqchilde.github.io/blob/8b4edcc7fc222f4e0cb9838625e7506b36e15b69/.vitepress/theme/components/heatmap.vue#L54

[Wugensheng3]

@yqchilde 谢了,朋友