FullCalendar 4.3

[sailei1]

<FullCalendar
        id="calendar"
        :aspectRatio="aspectRatio"
        :buttonText="buttonText"
        :events="calendarEvents"
        :header="header"
        :plugins="calendarPlugins"
        :resources="calendarResources"
        :schedulerLicenseKey="licenseKey"
        :views="views"
        @eventClick="eventClick"
        @eventResize="eventChange"
        @eventReceive="eventReceive"
        @eventDrop="eventDrop"
        defaultView="resourceTimelineCustom"
        firstDay="1"
        locale="zh-cn"
        resourceAreaWidth="10%"
        resourceLabelText="人员"
        showNonCurrentDates="true"
        weekends="false"
        weekNumberCalculation="ISO"
        :editable="true"
        :droppable="true"
        :defaultTimedEventDuration="defaultTimedEventDuration"
        :businessHours="businessHours"
        :height="400"
      />

import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin, { ThirdPartyDraggable } from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
data(){return {
  drakeEvent: null,
      oneClickTimer: null, // 点击事件
      eventClickCount: 0, // 点击次数
      licenseKey: 'GPL-My-Project-Is-Open-Source',
      calendarPlugins: [interactionPlugin, resourceTimelinePlugin],
      aspectRatio: 1.25,
      buttonText: { day: '天', month: '月', week: '周', today: '今天', year: '年' },
      header: {
        left: 'hide',
        center: 'title',
        right: 'hide'
      },
      businessHours: [{ daysOfWeek: [1, 2, 3, 4, 5], startTime: '09:00', endTime: '24:00' }],
      defaultTimedEventDuration: '04:00:00', // 拖拽默认时间 4个小时
      views: {
        resourceTimelineCustom: {
          type: 'resourceTimeline',
          duration: { days: 31 },
          buttonText: '10 days',
          // snapDuration:'04:00:00',
          slotDuration: '04:00:00',
          minTime: '09:00:00',
          maxTime: '17:00:00'
        }
      },
      eventTime: {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
      },
      editable: true,
      calendarResources: [],
      // calendarEvents: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline',
      calendarEvents: [
        // { resourceId: 'd', title: '请假', start: '2020-12-07', end: '2020-12-07 13:00:00', resourceEditable: false, editable: false, overlap: false, classNames: ['notice-red'] },
        // { resourceId: 'c', title: 'event 3', start: '2020-12-02', end: '2020-12-04', editable: false, overlap: false },
        // { resourceId: 'f', title: 'event 4', start: '2020-12-05 00:00:00', end: '2020-12-06 24:00:00', classNames: ['hide'], overlap: false, resourceEditable: false },
        // { resourceId: 'b', title: 'event 5', start: '2020-12-02', end: '2020-12-04' }, { resourceId: 'e', title: 'event 2', start: '2020-12-02', end: '2020-12-04' }
      ],
 }
}
 methods:{
   uuid () {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1) }
      s[14] = '4'
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
      s[8] = s[13] = s[18] = s[23]
      var uuid = s.join('')
      return uuid
    },
    formatTime (time, fmt) {
      var o = {
        'M+': time.getMonth() + 1, // 月份
        'd+': time.getDate(), // 日
        'h+': time.getHours(), // 小时
        'm+': time.getMinutes(), // 分
        's+': time.getSeconds(), // 秒
        'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
        S: time.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (time.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      }
      return fmt
    },
    initCalendar () {
      this.calendarEvents = [] // 清空事件
      var calendarEl = document.getElementById('calendar')

      /* eslint-disable no-new */
      this.drakeEvent = dragula({
        containers: [calendarEl],
        direction: 'horizontal',
        isContainer: function (el) {
          return false
        }
      })

      /* eslint-disable no-new */
      new ThirdPartyDraggable(calendarEl, {
        itemSelector: '.fc-resource-area tr',
        // mirrorSelector: '.fc-event-container',
        eventData: (eventEl) => {
          // console.log(eventEl)
          // console.log(this.calendarEvents)
          const id = eventEl.getAttribute('data-resource-id')
          const el = {
            title: eventEl.innerText,
            duration: '04:00',
            color: '#' + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16),
            resourceEditable: false,
            resourceId: id,
            constraint: {
              resourceIds: [id]  //不允许跨行拖拽
            }

          }
          return el
        }

      })
      const headerCell = calendarEl.querySelector('.fc-time-area  tbody').querySelectorAll('tr:nth-child(2) .fc-cell-text')
      for (let i = 0; i < headerCell.length; i++) {
        if (headerCell[i]) {
          const text = headerCell[i].innerText.substring(0, 2) // 上午 下午
          headerCell[i].innerText = text
        }
      }
    },
    // 事件 接收
    eventReceive (info) {
      console.log(info)
      const { end, start, title } = info.event
      const id = this.uuid()
      this.calendarEvents.splice(0, 0, { end, start, title, id, resourceEditable: false })
    },
    // 事件 拖拽
    eventDrop (info) {
      console.log(info)
      const { end, start, title, id, resourceEditable, resourceId, constraint } = info.event
      this.calendarEvents.splice(0, 1, { end, start, title, id, resourceEditable, resourceId, constraint })
    },
    // 事件 变化
    eventChange ({ el, event }) {
      // debugger
      // console.log(arguments)

      // const start = this.formatTime(event.start, 'yyyy-MM-dd hh:mm:ss'); const end = this.formatTime(event.end, 'yyyy-MM-dd hh:mm:ss')
      const obj = this.calendarResources.find((item) => {
        return item.title === el.innerText
      })
      const index = this.calendarEvents.findIndex((item) => {
        return item.title === el.innerText
      })
      if (obj) {
        const e = {
          end: event.end,
          start: event.start,
          title: el.innerText,
          id: obj.id,
          resourceEditable: false,
          resourceId: event.resourceId,
          constraint: {
            resourceIds: [event.resourceId]
          }

        }
        this.calendarEvents.splice(index, 1, e)
      }
    },
    // 事件 双击删除
    eventClick ({ el, event }) {
      // console.log(arguments)
      this.eventClickCount++
      if (this.eventClickCount === 1) { // 单击
        this.clickTimer = setTimeout(function () {
          this.eventClickCount = 0
          // console.log(el.innerText)
        }, 400)
      } else if (this.eventClickCount === 2) { // 双击
        clearTimeout(this.clickTimer)
        this.eventClickCount = 0
        const index = this.calendarEvents.findIndex((item) => {
          return item.title === el.innerText
        })
        if (index !== -1) {
          this.calendarEvents.splice(index, 1)
          event.remove()
        }
      }
    },
}