elementui-plus日历组件自定义标识

<el-calendar ref="calendar" v-model="dateVal">
                    <!-- 自定义日历头部，添加月份切换按钮 -->
                    <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size="small" class="calender_btn" @click="selectChangeDate('prev-month')">
                        上个月
                        </el-button>
                        <el-button size="small" class="calender_btn" @click="selectChangeDate('today')">今天</el-button>
                        <el-button size="small" class="calender_btn" @click="selectChangeDate('next-month')">
                        下个月
                        </el-button>
                    </el-button-group>
                    </template>
                    
                    <!-- 自定义日期单元格 -->
                    <template #date-cell="{ data }" >
                    <div @click="selectDate(data)" class="calendar-cell"> 
                        {{ data.day.split('-').slice(2).join('-') }}
                        <!-- 活动日期标记 -->
                        <div v-if="Number(data.day.split('-')[1]) === currentMonth">
                            <div v-show="isJobList.includes(Number(data.day.split('-').slice(2).join('-')))" class="cell_bs">
                                1
                            </div>
                        </div>
                    </div>
                    </template>
                </el-calendar>

import type { CalendarDateType, CalendarInstance } from 'element-plus'
// import { Icon } from '@element-plus/icons-vue'
// 有活动的日期列表
const isJobList = ref<number[]>([]) 
// 日历组件实例
const calendar = ref<CalendarInstance>()
// 当前选中的日期
const dateVal = ref(new Date())
// 当前月份（用于过滤其他月份的日期）
const currentMonth = ref(dateVal.value.getMonth() + 1)
 
// 月份切换处理
const selectChangeDate = async (val: CalendarDateType) => {
  if (!calendar.value) return;
  
  // 调用日历组件的方法切换日期
  calendar.value.selectDate(val);
  
  // 等待DOM更新完成
  await nextTick();
  
  // 更新当前月份
  currentMonth.value = dateVal.value.getMonth() + 1;
  
  // 获取当前年月
  const year = dateVal.value.getFullYear();
  const month = currentMonth.value;
  
  // 调用接口获取活动日期
  const res = await fetchActivityDates(year, month);
  
  // 更新活动日期列表
  isJobList.value = res;
}
 
// 日期选择处理
const selectDate = (data: any) => {
  // 可以在这里添加日期点击事件的处理逻辑
  console.log('选中的日期：', data.day);
}
 
// 模拟接口请求：获取指定年月的活动日期
const fetchActivityDates = async (year: number, month: number) => {
  // 实际项目中替换为真实接口调用
  
  // 假设接口返回格式为 [1, 5, 10, 20] 表示该月1号、5号等有活动
  return [1,5,10,13,19,23,29];
}

.cell_bs{
    position: absolute;
    top: -8px;
    right: -8px;
    width: 15px;
    height: 15px;
    background: red;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep(.el-calendar){
    width: 30%;
}
:deep(.el-calendar__body){
    height: 320px;
    overflow: auto;
}
:deep(.el-calendar-table .el-calendar-day){
    height: 45px !important;
}
:deep(.el-calendar-table .el-calendar-day .calendar-cell){
    border-radius: 50%;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-cell{
    position: relative;
}
:deep(.el-calendar-table td){
    border: none !important;
}
:deep(.is-selected .el-calendar-day .calendar-cell){
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f0f5ff;
}
:deep(.el-calendar-table td.is-selected){
    background-color: #ffffff !important;
}
.calender_btn{
    background-color: #3976f7 !important;
    color: #ffffff !important;
}
:deep(.el-calendar__header){
    color: #333333 !important;
}
:deep(.el-calendar__body thead){
    color: #333333 !important;
}
:deep(.current){
    color: #333333 !important;
}
:deep(.prev){
    color: #666666 !important;
}
:deep(.el-calendar-table .el-calendar-day:hover){
    background-color: #f0f5ff !important;
}