<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>
  </div>
</template>

<script>
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: '踢足球' }
      ]
    }
  },
  methods: {
    handleClick(date) {
      alert(date)
    }
  }
}
</script>

<style scoped>

</style>