Vue 3中Vue Cal月视图日期单元格自定义背景色实现求助

核心思路 #

要修改日期单元格的背景色，不能仅操作事件计数标记，需使用Vue Cal提供的**cell-content插槽**——该插槽可直接访问对应日期的单元格容器与当日所有事件，以此动态设置背景样式。

修改后的完整代码 #

Template部分 #

替换原events-count插槽为cell-content，保留原有vue-cal配置：

<template>
  <vue-cal
    class="vuecal--blue-theme"
    selected-date="2022-08-25"
    xsmall
    :disable-views="['years', 'year', 'week', 'day']"
    active-view="month"
    :events-on-month-views="true"
    :events="calendarEvents"
    hide-view-selector
    :time="false" 
    style="width: 300px; height: 262px"
  >
    <!-- 通过cell-content插槽获取单元格与当日事件 -->
    <template #cell-content="{ events, cell }">
      <!-- 保留日期数字的默认显示 -->
      <span class="vuecal__cell-day">{{ cell.day }}</span>
      <!-- 根据事件布尔值动态设置背景 -->
      <span 
        class="cell-background"
        :style="{ backgroundColor: getCellBgColor(events) }"
      ></span>
    </template>
  </vue-cal>
</template>

Script部分 #

简化辅助函数，确保正确判断当日事件的布尔字段：

<script>
import vuecal from 'vue-cal';
import 'vue-cal/dist/vuecal.css';
import { defineComponent, ref } from 'vue'; 

export default defineComponent({
  name: 'Calendar',
  components: {
    'vue-cal': vuecal,
  }, 
  setup() { 
    const calendarEvents = ref([
      {
        id: '01',
        start: '2022-08-01',
        end: '2022-08-01',
        name: 'Event Name 01',
        isWorkingDay: true,
        isAvailable: true,
      },
      {
        id: '02',
        start: '2022-08-02',
        end: '2022-08-02',
        name: 'Event Name 02',
        isWorkingDay: true,
        isAvailable: false,
      },
      {
        id: '03',
        start: '2022-08-03',
        end: '2022-08-03',
        name: 'Event Name 03',
        isWorkingDay: false,
        isAvailable: false,
      }
    ]);

    // 根据当日事件返回对应背景色
    const getCellBgColor = (events) => {
      if (!events.length) return 'transparent';
      const event = events[0]; // 假设单日对应一个事件
      if (event.isWorkingDay && event.isAvailable) return '#00FF00';
      if (event.isWorkingDay && !event.isAvailable) return '#FFA500'; // 可根据需求替换为红色
      return '#FF0000';
    };

    return {
      calendarEvents,
      getCellBgColor,
    };
  },
});
</script>

Style部分 #

添加穿透样式，让背景层覆盖整个单元格：

<style scoped>
/* 设置单元格为相对定位，让背景层可以铺满 */
:deep(.vuecal__cell) {
  position: relative;
  overflow: hidden;
}

/* 背景层铺满单元格 */
.cell-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3; /* 可选：调整透明度，避免遮挡日期数字 */
}

/* 确保日期数字显示在背景层上方 */
:deep(.vuecal__cell-day) {
  position: relative;
  z-index: 1;
}

.vuecal__cell-events-count {
  background: transparent;
}
</style>

关键说明 #

1. 插槽选择原因：cell-content是Vue Cal专为自定义单元格内容设计的插槽，能直接获取单元格DOM与当日事件，是修改单元格样式的正确入口。
2. 背景层实现逻辑：通过绝对定位的cell-background元素铺满单元格，利用z-index确保日期数字显示在背景之上。
3. 样式穿透：由于Vue Cal的类属于组件内部样式，需使用:deep()穿透scoped样式，保证自定义样式生效。
4. 辅助函数优化：假设单日对应一个事件，直接取第一个事件进行判断；若单日存在多个事件，可根据需求调整逻辑（如取优先级最高的布尔值）。

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