Element plus日历组件，新增修改自定义内容

<template>
  <el-calendar style="font-size: small;">
    <template #date-cell="{ data }" >
      <p style="min-height: 45px; word-break: break-all" @click="handleClick(data.day)">
        <div style="height: 20px"> {{ data.day.split('-').slice(1).join('-') }} </div>

<!--        <div v-if="arr.find(v => v.date === data.day)" >{{data.date}}</div>-->
        <div v-if="arr.find(v => v.date === data.day)" v-html="arr.find(v => v.date === data.day).content"></div>
      </p>
    </template>
  </el-calendar>

  <el-dialog v-model="dialogFormVisible" title="日程安排">
    <el-form :model="calendar" :label-width="100">
      <el-form-item label="日程内容">
        <el-input v-model="calendar.content" autocomplete="off" style="width: 85%"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog title="今天要吃的药" v-model="visible" style="width: 20%; text-align: center">

    <div v-html="content" style="line-height: 30px"></div>
    <el-button style="margin-top: 20px" type="primary" @click="saveContent">我知道了</el-button>

  </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import { toRaw } from "@vue/reactivity";
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "Calendar",
  data() {
    return {
      form: JSON.parse(localStorage.getItem('user') || "{}").username,
      value: new Date(),
      arr: [],
      dialogFormVisible: false,
      calendar: {},
      calendar2: '',
      visible: false,
      content: '',
    }
  },
  props:['username'],

  created() {
    this.load()
  },
  methods: {
    saveContent() {
      this.visible = false
      localStorage.setItem('calendarVisible', this.date)
    },
    load() {
      fetch("http://localhost:9090/calendar/usernameall?username=" + this.username).then(res => res.json()).then(res => {
        this.arr = res

        const storageDate = localStorage.getItem('calendarVisible')
        const date = new Date().toJSON().split('T').join(' ').substr(0, 10) //今天
        const data = this.arr.find(v => v.date === date) // 从数据库查出的数据对象
        // console.log(data)

        if(!storageDate || (data && storageDate !== data.date)) {
          //弹窗提醒
          this.content = data.content
          this.date = data.date
          this.visible = true
        }
      })
    },

    // handleClick(date) {
    //   request.get('/calendar/username',{ params:{
    //       username: this.username,
    //       date: date,
    //     }
    //   }).then(res => {
    //     console.log(JSON.stringify(res))
    //     res = JSON.stringify(res)
    //     res = res.replace("[","");
    //     res = res.replace("]","");
    //     if (res) {
    //         this.calendar = JSON.parse(res)
    //       }else{
    //         this.calendar.username = this.username;
    //         this.calendar.date = date;
    //     }
    //     this.dialogFormVisible = true
    //   })
    // },

    handleClick(date) {
      request.get('/calendar/username',{ params:{
          username: this.username,
          date: date,
        }
      }).then(res => {
        for(var dataItem of res){
          dataItem = JSON.stringify(dataItem)
          dataItem = dataItem.replace("[","");
          dataItem = dataItem.replace("]","");
          if (dataItem) {
            this.calendar = JSON.parse(dataItem)
          }else{
            this.calendar.username = this.username;
            this.calendar.date = date;
          }
        }
        this.dialogFormVisible = true
      })
    },

    save() {
      fetch("http://localhost:9090/calendar", {
        method: 'post',
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(this.calendar)
      }).then(res => {
        if (res.status === 200) {
          ElMessage.success('设置日程成功');
          this.load()
          this.dialogFormVisible = false
        } else {
          ElMessage.success('操作失败');
        }
      })
    },

  }
}
</script>

<style>
.el-calendar-day {
  height: auto !important;
  height: 45px;
  text-align: left;
  padding: 2px
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>