vue fullcalendar dayRende 怎么使用

`dayRender` 选项是用于在日历上渲染自定义内容的回调函数，在特定日期上显示自定义 HTML 或其他元素。以下是使用 `dayRender` 的示例：

<template>
  <FullCalendar
    ref="calendar"
    :plugins="calendarPlugins"
    :events="calendarEvents"
    :dayRender="customDayRender"
  />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin],
      calendarEvents: [
        {
          title: 'Event 1',
          start: '2021-07-01'
        },
        {
          title: 'Event 2',
          start: '2021-07-03'
        }
      ]
    }
  },
  methods: {
    customDayRender(info) {
      // 如果是 7 月 1 日，就在日历上渲染一个圆圈
      if (info.date.getDate() === 1 && info.date.getMonth() === 6) {
        info.el.innerHTML = '<div class="circle"></div>'
      }
    }
  }
}
</script>

<style>
.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
</style>

在这个示例中，我们定义了一个 `FullCalendar` 组件并将 `dayGridPlugin` 作为插件传递给它。我们还定义了一组事件以在日历中显示。在 `dayRender` 选项中，我们传递了一个名为 `customDayRender` 的方法。此方法接收一个 `info` 参数，该参数包含有关要渲染的日期的信息。在此方法中，我们检查日期是否为 7 月 1 日，并在日期上渲染一个自定义元素。

在此示例中，我们渲染了一个红色圆圈。你可以根据需要自定义 HTML 元素的样式和内容。