vue-hash-calendar打卡标记

Vue-HashCalendar是一个轻量级的日历组件库，适用于 Vue.js 应用程序。它允许你在日历上添加和显示时间事件，包括打卡功能。当你想要在特定日期上做标记，比如签到、任务完成等，你可以通过设置组件的事件或者自定义插槽来实现这个功能。

例如，你可以创建一个事件对象并绑定到某个日期上，当用户点击该日期时，会触发相应的事件处理函数，并在界面上显示打卡标记。通常，这涉及到了数据驱动视图和事件监听的概念：

<template>
  <hash-calendar
    :events="events"
    @click-day="handleDayClick"
  ></hash-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [], // 初始化空数组存放打卡事件
    };
  },
  methods: {
    handleDayClick(date) {
      const event = { date, isToggled: true }; // 创建新的打卡事件
      this.events.push(event); // 添加到事件列表中
    },
  },
};
</script>

在这个例子中，`handleDayClick`方法会在用户点击日历上的日期时被调用，新创建的事件会被添加到`events`数组里，从而更新视图显示出打卡状态。