Vue.js V-Calendar自定义高亮：范围日期显三点/当天显圆圈求助

完全可以实现你需要的效果，核心思路是拆分属性配置，分别处理日期范围的点高亮和指定日期的圆圈高亮，同时禁用默认的范围背景覆盖。

实现步骤 #

• 拆分属性数组，分别定义「范围日期点高亮」和「指定日期圆圈高亮」的配置项
• 禁用默认的范围高亮背景，避免覆盖日期内容
• 自定义CSS调整圆圈和日期文本样式

修改后的完整代码 #

JavaScript #

new Vue({
  el: '#app',
  data() {
    return {
      attrs: [
        // 配置1：日期范围内的每一天显示三个点
        {
          dot: true,
          highlight: false, // 关闭默认的范围高亮背景
          dates: [{start: new Date(2023, 10, 12), end: new Date(2023, 10, 20)}],
        },
        // 配置2：指定日期（这里是起止日）显示圆圈高亮
        {
          dot: false,
          highlight: true,
          dates: [new Date(2023, 10, 12), new Date(2023, 10, 20)],
        }
      ],
    };
  },
})

CSS #

/* 自定义圆圈高亮样式 */
.date-circle {
  background: #ff8080;
}
.date-text {
  color: black;
}
/* 禁用默认的范围高亮背景 */
.vc-highlight-area {
  display: none;
}

HTML #

<div id="app">
  <v-calendar
    :attributes="attrs"
    :from-page="{ month: 11, year: 2023 }">
  </v-calendar>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>
<script src="https://unpkg.com/v-calendar"></script>

说明 #

• 如果你的需求是「单个日期事件显示圆圈，范围事件仅显示点」，只需修改第二个配置项的dates为单个日期数组即可
• vc-highlight-area是V-Calendar默认的范围高亮背景类，设置display: none可以取消默认的范围覆盖效果
• 可以根据需求调整dot的样式（比如颜色、数量），通过修改.vc-dot相关CSS实现

内容的提问来源于stack exchange，提问作者B L Praveen