自定义日历

日历功能实现

效果图

el-calendar日历组件自定义内容

<template>
  <div class="workCalendarPage">
    <div class="select">
      <el-form inline>
        <el-form-item>
          <span>时间选择：</span>
        </el-form-item>
        <el-form-item>
          <el-select v-model="curYear" placeholder="请选择年">
            <el-option
              v-for="item in yearOptions"
              :key="item.key"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="curMonth" placeholder="请选择月" @change="selectDateHandle">
            <el-option
              v-for="item in monthOptions"
              :key="item.key"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-calendar v-model="eventDate">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
          <div class="calendar-day">
            {{ data.day.split("-").slice(2).join("-") }}
          </div>
          <!-- 自定义日历事件 -->
          <div
            v-for="(item, index) in formatSchedule(data)"
            :key="index"
            class="eventDate"
            @click="handleItemClick(item)"
          >
            <div
              style="background-color: #ff4c6f"
              class="event_num1 eventDate-item"
            >
              <span style="color: #fff">待办任务：{{ item.event_num1 }}</span>
            </div>
            <div style="background-color: #6fcf97" class="event_num2 eventDate-item">
              <span style="color: #fff"
                >已处理任务：{{ item.event_num2 }}</span
              >
            </div>
            <div style="background-color: #fc935f" class="event_num3 eventDate-item">
              <span style="color: #fff">处理中任务：{{ item.event_num3 }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

工具函数处理时间选择

//年月选择器
 cont handleCreateDatePicker = () => {
  const years = [];
  const months = [];
  for (let i = 1970; i <= 2099; i++) {
    years.push({
      label: `${i}年`,
      value: i,
    });
  }
  for (let i = 0; i <= 11; i++) {
    months.push({
      label: `${i + 1}月`,
      value: i,
    });
  }
  return {
    years,
    months,
  };
};
​
export default {
  handleCreateDatePicker
};

时间选择完向后台发请求拿到数据修改事件数据

<script>
import utils from "@/utils/utils";
export default {
  components: {},
  name: "",
  data() {
    return {
      yearOptions: [],//选择年
      monthOptions: [],//选择月
      eventDate: "2022-08", //日期控件显示的月份
      eventData: {
        schedule: [
          {
            event_date: "2022-08-16",
            event_num1: "30",
            event_num2: "200",
            event_num3: "29",
          },
          {
            event_date: "2022-08-18",
            event_num1: "40",
            event_num2: "290",
            event_num3: "35",
          },
          {
            event_date: "2022-08-21",
            event_num1: "50",
            event_num2: "270",
            event_num3: "28",
          },
          {
            event_date: "2022-08-25",
            event_num1: "20",
            event_num2: "250",
            event_num3: "30",
          },
        ],
      },
      curYear: new Date().getFullYear(), // 当前年
      curMonth: "", // 当前月
    };
  },
  //  watch: {
  //     currentDate(val) {
  //       this.eventData.schedule = [];
  //       this.initList();  // 后台返回的数据
  //     }
  //   },
  created() {
     this.monthOptions = utils.handleCreateDatePicker().months;
    this.yearOptions = utils.handleCreateDatePicker().years;
  },
  mounted() {
   
  },
​
  computed: {
    //将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
    //数据的时间格式： event_date:"2021-06-05" --- yyyy-MM-dd；
    //如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
    formatSchedule() {
      return (data) => {
        return this.eventData.schedule.filter((ele) => {
          let time = ele.event_date;
          return time == data.day;
        });
      };
    },
  },
  methods: {
    //年月选择完把时间传给后台发请求
    selectDateHandle(val){
      console.log(val);
      let newcurMonth = parseInt(this.curMonth)+1
      newcurMonth = newcurMonth < 10 ? '0' + newcurMonth : newcurMonth
      this.eventDate = `${this.curYear}-${newcurMonth}`
      console.log(this.eventDate,'time');
      if(this.eventDate){
        //请求后台数据赋值 => this.eventData.schedule
      }
    },
    handleItemClick(item) {
      //选中事件对应日期
      console.log(item.event_date, "event_date");
      //发请求拿到详细信息
    },
  },
};
</script>
<style lang='scss'  scoped>
.workCalendarPage {
  width: 1443px;
  height: 664px;
  background: #13292b;
}
::v-deep .el-calendar {
  background-color: #13292b;
  .el-calendar__header {
    display: none;
  }
  .eventDate-item {
    border-radius: 12px;
    padding-left: 6px;
  }
  .el-calendar-table thead th {
    color: #fff;
  }
  .el-calendar-day {
    background-color: #13292b;
  }
  // .is-today {
  //   .el-calendar-day {
  //     background-color: rgba(27, 72, 76, 1);
  //   }
  // }
​
  .el-calendar-table td {
    border: 1px solid rgba(56, 200, 192, 0.1);
  }
  .el-calendar-table td.is-today {
    color: #fff;
  }
}
::v-deep .el-calendar-table td.is-selected {
  background-color: rgba(27, 72, 76, 1);
  .el-calendar-day {
    border: 1px solid rgba(56, 200, 192, 0.1);
    background-color: rgba(27, 72, 76, 1);
  }
}
::v-deep .el-calendar-table td:not(.current) {
  pointer-events: none;
}
</style>