ElementUI - elCalendar 显示自定义日程

Hi-郑郑

已于 2024-12-13 10:26:14 修改

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

于 2024-11-18 11:49:55 首次发布

本文链接：https://blog.youkuaiyun.com/Hi_ZH/article/details/143851439

效果参考

参考代码

<template>
  <div class="app-container">
    <!-- 日历 -->
    <el-calendar :first-day-of-week="1">
      <!-- 插槽 -->
      <template slot="dateCell" slot-scope="{date, data}">
        <!--  date   单元格代表的日期  data { type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd-->
        <div>
          <!-- 这里加了周六周天的判断 -->
          <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'" @click="itemClick(date, data)">{
  
  {data.day.substring(5)}}</div>
          <!-- 数组循环 -->
          <div class="cell" v-for="(item,index) in tableData" >
            <!-- 加数据 -->
            <div v-if="data.day == item.day">