vue 使用 FullCalendar 实现日程管理 外部拖拽 自定义事件 事件拖拽 缩放 悬浮框 分类

点击原文链接 可代码分享

fm：

用了两个星期研究这个全日历,具体的命令记不住了，就在packjson文件中导入这些东西 ，注意版本 全日历官网有不同的版本 同样 有些版本不同 就没办法使用

 "@fullcalendar/core": "^4.4.2",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/interaction": "^4.3.0",
    "@fullcalendar/list": "^4.4.2",
    "@fullcalendar/resource-timeline": "^4.4.2",
    "@fullcalendar/timegrid": "^4.3.0",
    "@fullcalendar/timeline": "^4.3.0",
    "@fullcalendar/vue": "^4.3.1",



import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin,{ Draggable }  from '@fullcalendar/interaction'
import TodayListDetail from './components/TodayListDetail'
import calendarColor from 
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'


  components: {
    FullCalendar,
    Schedule,
    CRMFullScreenDetail: () =>
      import('@/components/CRMFullScreenDetail')
  },

然后呢 这里就是左侧的拖拽列表 最重要的是 external-events 这个id 最后是通过dom 获取到这个左侧列表监听拖拽到日历中

  mounted() {
    var containerEl = document.getElementById('external-events');

    // 初始化外部事件
    new Draggable(containerEl, {
        itemSelector: '.fc-event',
        eventData: function(eventEl) {
          console.log(eventEl,eventEl.innerText,'11111')
          return {
            title: eventEl.innerText
          }
        },
      }
    );

然后就是日历

  <FullCalendar
        ref="fullCalendar"
        :defaultView="defaultView"
        :header="{
          left: '',
          // center: 'prevYear,prev, title, next,nextYear',
          // center: 'title',
           center: '