FullCalendar拖拽日历在vue中单个页面的使用方法

1.首先通过npm下载插

npm install --save @fullcalendar/vue @fullcalendar/daygrid

2.在vue单页面里引入以下文件

//引入日历插件
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

3.在vue单页面中注册组件

 components: {
    FullCalendar
  }

4.在vue单页面中的template模板中使用组件

<FullCalendar :options="calendarOptions" />

5.在vue的data>return里对日历组件进行配置，然后在上一步中引用 注意calendarOptions变量是“=”还是“:”，项目不同会有所不同

calendarOptions={ //?拖拽日历配置
      plugins: [dayGridPlugin, interactionPlugin],
      initialView: 'dayGridMonth',
      locale: 'zh-cn', //? 配置中文
      selectable: true,//可编辑
      editable: true,//可拖拽
      height: 'auto',
      eventDrop: this.eventDrop, // ?拖拽事件
      header: {// 日历头部
        left: 'prev,next today',
        center: 'title',
        right: 'custom'
      },
      events: [//? 日历-预约事件
        {
          title: '高压氧仓预约',
          start: '2021-04-25',
          end: '2021-04-25'
        },
        {
          title: '高压氧仓预约',
          start: '2021-04-25', //开始时间
          end: '2021-04-25'  //结束时间
        }
      ]
    };

6.效果下如图