vue3+el-calendar自定义使用方法

先上效果图

el-calendar日历组件自定义并绑定上个月今天下个月点击按钮事件

<!-- 日历 -->
          <el-calendar ref="calendar" v-model="currentDate">
            <template #header="{ date }">
              <span>{{ date }}</span>
              <el-button-group>
                <el-button size="small" @click="selectDate('prev-month')">
                  上一个月
                </el-button>
                <el-button size="small" @click="selectDate('today')"
                  >今天</el-button
                >
                <el-button size="small" @click="selectDate('next-month')">
                  下一个月
                </el-button>
              </el-button-group>
            </template>
            <!-- 插槽 -->
            <template #date-cell="{ data }">
              <div>
                <div>
                  {{ data.day.split("-")[2] }}
                </div>
                <div
                  style="font-size: 12px"
                  v-for="(item, index) in textContent(data.day)"
                  :key="index"
                  @click="handleCellClick(data, item)"
                >
                  <div>
                    <span style="color: #f9a006"
                      >源：{{
                        item.heatSourceDailyHm == 0
                          ? "-"
                          : item.heatSourceDailyHm
                      }}</span
                    ><br />
                    <span style="color: #ff3b30"
                      >源：{{
                        item.heatSourceDailyHmH == 0
                          ? "-"
                          : item.heatSourceDailyHmH
                      }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网：{{
                        item.heatNetDailyHmH == 0 ? "-" : item.heatNetDailyHmH
                      }}</span
                    >
                  </div>
                  <div>
                    <span style="color: #3bd49a"
                      >源：{{
                        item.heatSourceDailyE == 0
                          ? "-"
                          : item.heatSourceDailyE
                      }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网：{{
                        item.heatNetDailyE == 0 ? "-" : item.heatNetDailyE
                      }}</span
                    ><br />
                    <span style="color: #328af7"
                      >源：{{
                        item.heatSourceDailyWm == 0
                          ? "-"
                          : item.heatSourceDailyWm
                      }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网：{{
                        item.heatNetDailyWm == 0 ? "-" : item.heatNetDailyWm
                      }}</span
                    >
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>

1、上面三个按钮点击后会使日历绑定的currentDate改变，用watch对该值监听 拿到新值转换成后台查询接口需要的时间戳这里进行具体业务需求的逻辑实现
2、textContent(date)是对tableData数据进行过滤，tableData则是对应的接口数据用来遍历
3、handleCellClick则是每个日期块绑定的点击事件 能拿到当天的日期及数据，我这里做的是点击打开编辑弹窗进行表单的赋值，想做其他业务具体按照自己需求灵活变通
 

import type { CalendarDateType, CalendarInstance } from "element-plus";
const currentDate = ref(new Date());
const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
watch(currentDate, (value, oldValue) => {

  var date = new Date(value);

  // 获取时间戳

  let timestamp = date.getTime();

  console.log(timestamp);
});
function textContent(date) {
  //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
  return tableData.value.filter((item) => {
    return date === item.day;
  });
}
const handleCellClick = (data, item) => {
  console.log(data, item);
  dialogFormVisible.value = true;
  form.heatYear = data.day;

  form.heatSourceDailyHm = item.heatSourceDailyHm;
  form.heatSourceDailyHmH = item.heatSourceDailyHmH;
  form.heatSourceDailyE = item.heatSourceDailyE;
  form.heatSourceDailyWm = item.heatSourceDailyWm;
  form.heatNetDailyHmH = item.heatNetDailyHmH;
  form.heatNetDailyE = item.heatNetDailyE;
  form.heatNetDailyWm = item.heatNetDailyWm;
};
const tableData = ref([
  {
    day: "2024-07-01",
    heatSourceDailyHm: 0,
    heatSourceDailyHmH: 0,
    heatSourceDailyE: 0,
    heatSourceDailyWm: 0,
    heatNetDailyHmH: 0,
    heatNetDailyE: 0,
    heatNetDailyWm: 0,
  },
  {
    day: "2024-07-02",
    heatSourceDailyHm: 0,
    heatSourceDailyHmH: 0,
    heatSourceDailyE: 0,
    heatSourceDailyWm: 0,
    heatNetDailyHmH: 0,
    heatNetDailyE: 0,
    heatNetDailyWm: 0,
  },
  {
    day: "2024-07-03",
    heatSourceDailyHm: 0,
    heatSourceDailyHmH: 0,
    heatSourceDailyE: 0,
    heatSourceDailyWm: 0,
    heatNetDailyHmH: 0,
    heatNetDailyE: 0,
    heatNetDailyWm: 0,
  },
  {
    day: "2024-07-04",
    heatSourceDailyHm: 0,
    heatSourceDailyHmH: 7,
    heatSourceDailyE: 0,
    heatSourceDailyWm: 0,
    heatNetDailyHmH: 7,
    heatNetDailyE: 7,
    heatNetDailyWm: 0,
  },
  {
    day: "2024-07-05",
    heatSourceDailyHm: 6,
    heatSourceDailyHmH: 6,
    heatSourceDailyE: 6,
    heatSourceDailyWm: 6,
    heatNetDailyHmH: 6,
    heatNetDailyE: 6,
    heatNetDailyWm: 6,
  },])