sfms3.0-ui/src/views/mes/holidayCalendar/index.vue

<template>
  <div>
    <el-calendar>
      <template #date-cell="{ data }">
        <div
          style="height: 100"
          :class="data.isSelected ? 'is-selected' : ''"
          @click="handleClick(data.day)"
        >
          <div>{{ data.day.split('-').slice(1).join('-') }}</div>
          <div v-if="arr.find((v) => v.date === data.day)">{{ arr.find((v) => v.date === data.day).content }}
          </div>
          <!-- <div>{{ data.isSelected ? '打羽毛球' : '' }}</div>  -->
        </div>
      </template>
    </el-calendar>
    <!-- 自定义弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="日程安排" width="600" draggable="true">
      <el-form :model="calendar" :label-width="100">
        <el-form-item label="日程内容">
          <el-input v-model="calendar.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="calendar.content" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="save"> 确定 </el-button>
          <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { HolidayCalendar, HolidayCalendarRules } from './holidayCalendar.data'
import * as HolidayCalendarApi from '@/api/mes/holidayCalendar'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '160px'


export default {
  name: 'Calendar',
  data() {
    return {
      value: new Date(),
      arr: [
        { date: '2024-04-01', content: '打球' },
        { date: '2024-04-02', content: '打台球' },
        { date: '2024-04-03', content: '打篮球' },
        { date: '2024-04-04', content: '踢足球' }
      ],
      dialogFormVisible:false,
      calendar: {}
    }
  },
  methods: {
    handleClick(date) {
      this.dialogFormVisible = true
      this.calendar.date=date
    },
    save(){

    }
  }
}
</script>

<style scoped>
</style>