Fullcalendar全日历 vue2.0的使用方法

1.安装插件

	"@fullcalendar/core": "^5.9.0",
   "@fullcalendar/daygrid": "^5.9.0",
   "@fullcalendar/interaction": "^5.9.0",
   "@fullcalendar/timegrid": "^5.9.0",
   "@fullcalendar/vue": "^5.9.0",

2.在页面内引入插件

<template>
      <div>
         <FullCalendar ref="calendarEl" :options="calendarOptions" />
      </div>
   </template>
   <script>
      import '@fullcalendar/core/vdom' // solves problem with Vite
      import FullCalendar from '@fullcalendar/vue'
      import dayGridPlugin from '@fullcalendar/daygrid'
      import timeGridPlugin from '@fullcalendar/timegrid'
      import interactionPlugin from '@fullcalendar/interaction'

      export default {
         注册组件
         components: {
            FullCalendar, // make the <FullCalendar> tag available
         },
         data () {
            rturn {
               calendarOptions: {
                  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
                  headerToolbar: {
                     left: 'prev,next today',
                     center: 'title',
                     right: 'dayGridMonth,timeGridWeek,timeGridDay'
                  },
                  buttonText: { //各按钮的显示文本信息
                     today: '今天',
                     month: '月',
                     week: '周',
                     day: '日',
                  },
                  locale: 'zh-cn', //语言环境
                  initialView: 'timeGridWeek',
                  // initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
                  events: [{//日程事件
                     id: createEventId(),
                     title: '会议',
                     start: '2021-09-17 08:15',
                     end: '2021-09-17 11:30'
                  },
                  {
                     id: createEventId(),
                     title: '会议1',
                     start: '2021-09-18 10:15',
                     end: '2021-09-18 11:30'
                  }],
                  editable: true,
                  selectable: true,
                  selectMirror: true,
                  dayMaxEvents: true,
                  weekends: true,
                  eventDurationEditable: true,
                  select: this.handleDateSelect,//拖拽选中事件
                  eventClick: this.handleEventClick,//日程事件点击事件
                  eventsSet: this.handleEvents,//设置日程事件
                  eventDrop: (info) => {
                     console.log(info);
                  },
                  eventResize: (info) => {
                     console.log(info, '<<<<<调整日程');
                  },
                  slotDuration: '00:15:00', // 15 minates
                  height: '100%'
               },
            }
         }
      }
   </script>