升级v-calendar至v3.1.0后DatePicker重复日期渲染异常求助

问题背景 #

从v-calendar v3.0.0-alpha.8升级至v3.1.0，选择从零重建日历而非迁移现有日历。设置三个年度重复日期（新年、独立日、圣诞节）后，多个日期出现渲染异常，仅保留第一个日期对象时显示正常。参考v3.0.3版本文档配置。

具体异常表现 #

• 2023-01-01新年：位置正确，显示两个标签「New Years」，颜色正确
• 2023-07-04独立日：位置正确，颜色显示为绿色（应为红色），悬浮显示两个「New Years」标签（应为「4th of July」）
• 2023-12-25圣诞节：显示完全正常
• 2024-01-01新年：位置正确，悬浮显示两个「New Years」标签

相关代码 #

ChartCalendar.vue #

<template>
  <div class="calendar">
    <DatePicker
        borderless
        is-dark="system"
        :attributes="attrs"
        :columns="5"
        :rows="2"
    />
  </div>
</template>

<script>
import { DatePicker } from "v-calendar";
import 'v-calendar/dist/style.css'

export default {
  name: "ChartCalendar.vue",
  components: {
    DatePicker,
  },
  data() {
    return {
      attrs: [
        {
          dates: [
            {
              start: new Date(2023, 0, 1),
              repeat: { every: "year", days: 1, months: 1, },
            },
          ],
          highlight: "green",
          popover: { label: "New Years" },
        },
        {
          dates: [
            {
              start: new Date(2023, 6, 4),
              repeat: { every: "year", days: 4, months: 7, },
            },
          ],
          highlight: "red",
          popover: { label: "4th of July" },
        },
        {
          dates: [
            {
              start: new Date(2023, 11, 25),
              repeat: { every: "year", days: 25, months: 12, },
            },
          ],
          highlight: "blue",
          popover: { label: "Christmas" },
        },
      ],
    };
  },
};
</script>

<style>
</style>

package.json #

{
  "author": "Daves Calendar",
  "license": "MIT",
  "name": "my spa",
  "version": "0.1.64",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.0",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.3",
    "chart.js": "^4.2.1",
    "chartjs-adapter-date-fns": "^3.0.0",
    "chartjs-plugin-annotation": "^2.2.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "core-js": "^3.29.1",
    "date-fns": "^2.29.3",
    "swiper": "^9.1.1",
    "v-calendar": "^3.1.0",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Calendar.vue #

<template>
  <div class="charts">
    <div class="calendar">
      <Calendar/>
    </div>
  </div>
</template>

<script>
import Calendar from '@/components/ChartCalendar.vue'

export default {
  name: "Calendar.vue",
  data() {
    return {}
  },
  emits: ['page-data'],
  mounted() {

    this.$emit('page-data', {title: 'calendar', content: '',})
  },
  components: {
    Calendar
  },
}

</script>

<style scoped>
.calendar {
  grid-row: 1;
}
.charts {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 100%;
}
</style>

问题原因与修复方案 #

核心问题 #

重复日期的repeat配置存在冗余参数。当设置repeat.every: "year"时，v-calendar会自动基于start日期的月、日信息每年重复该日期，无需额外指定days和months。这些冗余参数会导致日期被多次匹配，引发标签重复、样式继承错误。

修复后的attrs配置 #

attrs: [
  {
    dates: [
      {
        start: new Date(2023, 0, 1),
        repeat: { every: "year" },
      },
    ],
    highlight: "green",
    popover: { label: "New Years" },
  },
  {
    dates: [
      {
        start: new Date(2023, 6, 4),
        repeat: { every: "year" },
      },
    ],
    highlight: "red",
    popover: { label: "4th of July" },
  },
  {
    dates: [
      {
        start: new Date(2023, 11, 25),
        repeat: { every: "year" },
      },
    ],
    highlight: "blue",
    popover: { label: "Christmas" },
  },
],

原理说明 #

额外添加的days和months会被视为重复规则的补充条件，导致同一个日期被多个规则（甚至同一属性内的重复规则）匹配，从而出现标签叠加、样式错乱。圣诞节显示正常是因为其start日期的月（12）和日（25）未与其他规则冲突，未触发重复匹配。

内容的提问来源于stack exchange，提问作者DaveL17