在使用 Element UI 的 el-calendar 组件时，可以通过自定义插槽的方式实现农历显示。以下是具体的实现步骤：

实现步骤

1. 安装农历转换库

• 使用 solar2lunar 或类似的库来实现阳历到农历的转换。

• 安装方法：

  
  

  bash复制

  
  

  npm install solar2lunar

2. 引入库并配置

• 在项目中引入 solar2lunar 库，并在需要使用的地方进行配置。

3. 自定义日历单元格内容

• 使用 el-calendar 的 #date-cell 插槽，自定义每个日期单元格的内容，将农历信息显示在单元格中。

示例代码

以下是一个完整的实现示例：

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <div class="custom-date-cell">
        <!-- 显示阳历日期 -->
        <div class="solar-date">{{ data.day.split('-')[2] }}</div>
        <!-- 显示农历日期 -->
        <div class="lunar-date">{{ getLunarDate(data) }}</div>
      </div>
    </template>
  </el-calendar>
</template>

<script>
import solar2lunar from 'solar2lunar';

export default {
  methods: {
    // 获取农历信息
    getLunarDate(data) {
      const solarDate = data.day.split('-'); // 格式为 ['2024', '10', '12']
      const lunarDate = solar2lunar(solarDate[0], solarDate[1], solarDate[2]);

      // 返回农历日期和节日信息
      return  `${lunarDate.IMonthCn}${lunarDate.IDayCn}${lunarDate.Term?"("+lunarDate.Term+")":''}`;
    },
  },
};
</script>

<style scoped>
.custom-date-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.solar-date {
  font-weight: bold;
}
.lunar-date {
  font-size: 12px;
  color: #666;
}
</style>

代码说明

1. solar2lunar 库

• 该库用于将阳历日期转换为农历日期，并返回农历相关信息（如农历日期、节日等）。

2. #date-cell 插槽

• el-calendar 提供了 #date-cell 插槽，允许自定义每个日期单元格的内容。

• data.day 是当前日期的字符串，格式为 YYYY-MM-DD。

3. getLunarDate 方法

• 该方法将阳历日期转换为农历日期，并返回农历日期和节日信息。

4. 样式调整

• 使用简单的样式调整阳历和农历的显示效果。

效果

• 每个日期单元格会显示阳历日期和对应的农历日期。

• 农历节日（如春节、中秋节等）也会显示在单元格中。