如何修改Vuetify v-date-picker组件的事件符号？

因为v-date-picker没有事件圆点的单独插槽，你可以通过以下两种方式实现自定义形状来表示云量占比：

方法一：修改默认事件圆点样式（轻量改动） #

利用组件自带的event-class属性给不同云量的事件绑定自定义类，再通过CSS修改样式：

1. 绑定事件数据与自定义标识
   在data里定义带云量等级的事件数组：

data() {
  return {
    selectedDate: null,
    dateEvents: [
      { date: '2024-05-20', cloudCoverage: 'full' }, // 全云
      { date: '2024-05-21', cloudCoverage: 'half' }, // 半云
      { date: '2024-05-22', cloudCoverage: 'quarter' }, // 四分之一云
      { date: '2024-05-23', cloudCoverage: 'none' } // 无云
    ]
  }
}

2. 配置日期选择器
   给v-date-picker绑定事件、自定义类生成函数，并清空默认事件颜色：

<v-date-picker
  v-model="selectedDate"
  :events="dateEvents"
  :event-class="getEventClass"
  event-color="transparent"
></v-date-picker>

3. 实现类名生成函数
   根据事件的云量等级返回对应类名：

methods: {
  getEventClass(event) {
    return `cloud-coverage-${event.cloudCoverage}`
  }
}

4. 编写自定义CSS
   通过类名定位事件圆点，修改形状与样式（Vue单文件组件需加::v-deep穿透scoped样式）：

/* 调整默认事件圆点大小 */
::v-deep .v-date-picker-event {
  width: 8px;
  height: 8px;
  margin: 0 2px;
}

/* 全云：实心圆点 */
::v-deep .cloud-coverage-full .v-date-picker-event {
  background-color: #666;
  border-radius: 50%;
}

/* 半云：上半圆 */
::v-deep .cloud-coverage-half .v-date-picker-event {
  background-color: #666;
  border-radius: 50% 50% 0 0;
}

/* 四分之一云：右上四分之一圆 */
::v-deep .cloud-coverage-quarter .v-date-picker-event {
  background-color: #666;
  border-radius: 0 50% 0 0;
}

/* 无云：空心圆点 */
::v-deep .cloud-coverage-none .v-date-picker-event {
  border: 1px solid #666;
  background-color: transparent;
  border-radius: 50%;
}

方法二：用day插槽完全自定义日期单元格（高灵活度） #

通过v-slot:day接管整个日期单元格的渲染，完全控制指示器的样式与位置：

1. 配置日期选择器与插槽

<v-date-picker
  v-model="selectedDate"
>
  <template v-slot:day="{ date, isSelected, isDisabled }">
    <div
      class="custom-day"
      :class="{ 'selected': isSelected, 'disabled': isDisabled }"
    >
      <!-- 日期数字 -->
      {{ date.day }}
      <!-- 云量指示器 -->
      <div class="cloud-indicator" :class="getCloudClass(date)"></div>
    </div>
  </template>
</v-date-picker>

2. 编写类名匹配函数
   根据当前日期匹配对应的云量等级：

methods: {
  getCloudClass(date) {
    // 把date对象转为YYYY-MM-DD格式，和事件里的日期匹配
    const dateStr = date.toISOString().split('T')[0]
    const event = this.dateEvents.find(item => item.date === dateStr)
    return event ? `cloud-coverage-${event.cloudCoverage}` : ''
  }
}

3. 编写自定义CSS

.custom-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.custom-day.selected {
  background-color: #1976d2;
  color: #fff;
}

.custom-day.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.cloud-indicator {
  width: 8px;
  height: 8px;
  margin-top: 2px;
}

.cloud-coverage-full {
  background-color: #666;
  border-radius: 50%;
}

.cloud-coverage-half {
  background-color: #666;
  border-radius: 50% 50% 0 0;
}

.cloud-coverage-quarter {
  background-color: #666;
  border-radius: 0 50% 0 0;
}

.cloud-coverage-none {
  border: 1px solid #666;
  background-color: transparent;
  border-radius: 50%;
}

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