基于 element-plus Calendar 做了一些小调整

效果图：

<template>
  <app-page>
    <app-table-layout #table>
      <el-calendar ref="calendar" :v-model="new Date()">
        <template #header="{ date }">
          <span>编辑节假日</span>
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="mini" @click="selectDate('prev-year')">上一年</el-button>
            <el-button size="mini" @click="selectDate('prev-month')">上个月</el-button>
            <el-button size="mini" @click="selectDate('today')">今天</el-button>
            <el-button size="mini" @click="selectDate('next-month')">下个月</el-button>
            <el-button size="mini" @click="selectDate('next-year')">下一年</el-button>
          </el-button-group>
        </template>
        <template #dateCell="{ data }">
          <div style="height: 100%;width: 100%;" @click="showEdit(textContent(data.day), data.day)">
            <el-row :class="data.isSelected ? 'is-selected' : ''" style="display: inherit;">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
              <el-button v-if="textContent(data.day) != undefined" type="danger" @click.stop="onDelete(textContent(data.day).id)" :icon="Delete" circle style="width: 20px;height: 20px;float: right;background-color: #ccc;border-color: #ccc;" />
            </el-row>
            <div v-if="textContent(data.day) != undefined">
              <el-row style="margin-bottom: 4px;">
                <el-col class="center">
                  <el-tag type="warning" class="tag">
                    <el-row>
                      <el-col :span="17" class="tag">
                        <el-tooltip v-if="textContent(data.day).holidayName != '' && textContent(data.day).holidayName.length > 8" class="box-item" effect="dark" :content="textContent(data.day).holidayName"
                          placement="top">
                          <span>{{ textContent(data.day).holidayName.substring(0, 8) + '...' }}</span>
                        </el-tooltip>
                        <span v-else>{{ textContent(data.day).holidayName != '' ? textContent(data.day).holidayName : '-' }}</span>
                      </el-col>
                    </el-row>
                  </el-tag>
                </el-col>
              </el-row>
              <el-row>
                <el-col class="center">
                  <el-tag type="primary" class="tag">
                    <el-row>
                      <el-col :span="17" class="tag">
                        <span>等级：{{ textContent(data.day).grade }}</span>
                      </el-col>
                    </el-row>
                  </el-tag>
                </el-col>
              </el-row>
            </div>
          </div>
        </template>
      </el-calendar>
    </app-table-layout>
    <HolidaySettingEdit ref="holidaySettingEdit" @success="showList" />
  </app-page>
</template>
  
<script lang="ts" setup>
import { onMounted, nextTick, ref } from "vue"
import HolidaySettingEdit from "./HolidaySettingEdit.vue"
import { UIFactory } from "jingjian-uicomponent-elementplus"
import { HttpResult } from "jingjian-https"
import { dayjs } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'

const calendar = ref()
const holidaySettingEdit = ref();
const holidaySettingData = ref<any>([]);

const showListUrl = '/deployment/holidaySetting/list'
const onDeleteUrl = '/deployment/holidaySetting/delete'

onMounted(() => nextTick(() => showList()))

const onDelete = async (id: any) => 
{
  try
  {
    if (!await UIFactory.confirm('您确定要删除吗')) return

    const res: HttpResult<any> = await jingjian.https.post(onDeleteUrl, { ids: [id] })
    if (!res.success) throw Error(res.msg)

    UIFactory.success('删除成功')
    showList()
  }
  catch(ex: any)
  {
    UIFactory.error(ex.message)
  }
}

const selectDate = (value: any) => calendar.value.selectDate(value)

const showList = async () => {
  try {
    let request = {
      page: 1,
      limit: 999999999
    }

    const res: HttpResult<any> = await jingjian.https.get(showListUrl, request);
    if (!res.success) throw new Error(res.msg);

    holidaySettingData.value = res.data;
  }
  catch (error: any) {
    UIFactory.error(error.message);
  }
}

const showEdit = (entity?: any, date?: any) => holidaySettingEdit.value.show(entity, date)

const textContent = (date?: any) => holidaySettingData.value.filter((item: any) => dayjs(item.settingDate).format('YYYY-MM-DD') == date)[0]
</script>

<style lang="less" scoped>
:deep(.el-calendar-table thead th) {
  text-align: center;
}

:deep(tbody){
  background-color: #fbfbfb;
}

.is-selected {
  color: #1989fa;
}
</style>