vue3 fullcalendar日期模块

fullcalendar文档，对于我来说，看的不是理解。我总结了几点重要的代码，可以完成基本的操作。

有需要的自取！

安装依赖

npm install @fullcalendar/vue3 --save
npm install @fullcalendar/daygrid --save
npm install @fullcalendar/interaction--save

代码

<template>
  <div class="app-container">
    <FullCalendar :options="calendarOptions" />
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        height: '80vh',
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh-cn',// 切换语言，当前为中文
        // headerToolbar: true,//是否隐藏默认工具栏 默认false
        // selectable: true, //是否可以选中日历格 默认false
        // dateClick: this.handleDateClick, //点击日期事件
        dayCellClassNames: 'day-cell-month',//单元格类名
        dayMaxEvents: 2,// 最大事件数
        events: [
          { title: 'event 1', date: '2024-05-01' },
          { title: 'event 3', date: '2024-05-01' },
          { title: 'event 4', date: '2024-05-01' },
          { title: 'event 5', date: '2024-05-01' },
          { title: 'event 2', date: '2024-05-02' }
        ]
      }
    }
  },
  methods: {
    handleDateClick: function (arg) {
      alert('date click! ' + arg.dateStr)
    }
  }
}
</script>

events就是根据日期当天的日程