[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容

<template>
  <div>
    <el-calendar v-model="dateValue" :first-day-of-week="1">
      <template #dateCell="{date, data}">
        <div class="date-content">
          {{ formatLesson(date) }}
        </div>
      </template>
    </el-calendar>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dateValue: new Date(),
      lessons: [
        { date: '2023-04-01', lesson: '数学' },
        { date: '2023-04-02', lesson: '语文' },
        // ... 更多课程数据
      ]
    };
  },
  methods: {
    formatLesson(date) {
      const lesson = this.lessons.find(item => item.date === this.formatDate(date));
      return lesson ? lesson.lesson : '';
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }
  }
};
</script>
 
<style scoped>
.date-content {
  text-align: center;
  line-height: 40px;
}
</style>

这个代码实例使用了Element UI的<el-calendar>组件来展示课程信息。lessons数组包含了课程信息，formatLesson方法根据传入的日期格式化显示的课程，formatDate方法将JavaScript的Date对象转换为字符串格式，方便与数据中的日期格式匹配。在<template #dateCell>内部，通过一个模板插槽自定义了日历单元格的内容，将格式化后的课程信息显示在单元格中。