vue中使用FullCalendar实现自由拖拽日历活动（包含获取当前视图开始时间与结束时间，动态渲染接口日历活动数据）

原创

已于 2022-03-29 11:24:47 修改 · 7.7k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-29 11:09:36 首次发布

具体实现效果图如图所有：
在这里插入图片描述

1、安装FullCalendar相关插件

npm install --save "@fullcalendar/core"
npm install --save "@fullcalendar/interaction"
npm install --save "@fullcalendar/daygrid"
npm install --save "@fullcalendar/vue"

在这里插入图片描述
2、引用，静态数据进行拖拽（此时没有请求任何接口）

<FullCalendar ref="fullCalendar" :options="calendarOptions"/>

import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin, { Draggable } from '@fullcalendar/interaction'

export default {
   
   
  name: 'TradingTimeManage',
  components: {
   
   
    FullCalendar
  },
  data() {
   
   
    return {
   
   
      eventEl: null,
      calendarOptions: {
   
    //?拖拽日历配置
        plugins: [dayGridPlugin, interactionPlugin],
        firstDay: 1, // 把每周设置为从周一开始
        header: {
   
    // 日历头部
          left: 'prev,next today',
          center: 'title',
          right: 'custom'
        },
        /* 设置按钮文字 */
        buttonText:{
   
   
          today:'今天',
        },
        initialView: 'dayGridMonth',
        locale: 'zh-cn', //? 配置中文
        selectable: true,//可编辑
        // dayMaxEvents: true,
        slotMinutes: 15,
        editable: false, // 日历上是否可拖拽
        droppable: true,
        dropAccept: '.list-group-item',
        drop: this.drop,
        },
        events: []
      },
      list: [
        {
   
    name: '工作日', value: '1', color: 'green' },
        {
   
    name: '春节放假', value: '7', color: 'blue' },
        {
   
    name: '中秋节放假', value: '3', color: 'blue'  },
        {
   
    name: '国庆节放假', value: '7', color: 'blue'  },
        {
   
    name: '游玩', value: '7', color: 'blue'  },
      ]
    }
  },
  mounted() {
   
   
    var containerEl = document.getElementById('list-group-item');
    // 初始化外部事件
    new Draggable(containerEl, {
   
   
        itemSelector: '.list-group-item',
      }
    )
  },
  methods: {
   
   
    drop(date, allDay) {
   
   
      this.calendarOptions.events.push({
   
    // add new event data
        title: date.draggedEl.firstChild.innerHTML,
        start: date.dateStr,
        end: moment(date.dateStr).add(date.draggedEl.lastChild.innerHTML, 'days').format('YYYY-MM-DD')
      })
    }
  }
}

3、获取当前日历视图开始时间、结束时间

 // 获取当前视图日历的范围
      const time = this.$refs.fullCalendar.getApi().currentDataManager.state.dateProfile.renderRange
      this.start = Date.parse(moment(time.start).format()) // 视图开始时间
      this.end = Date.parse(moment(time.end)