FullCalendar 在vue的使用 直接拿过来就能用

导入包

npm 命令

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

import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

组件注册

 components: {  FullCalendar, },

组件使用

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

日历的配置都在 calendarOptions里

具体操作

data () {
    return {
   		 //日历配置
    	calendarOptions: { 
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh-cn', //? 配置中文
        selectable: false,//可编辑
        editable: true,//可拖拽
        height: 'auto',
        title: '月度计划配置',
        firstDay: 1,
        buttonText: { today: "今天", month: "月", week: "周", day: "日" },
        eventDrop: this.eventDrop, // ?拖拽事件
        // 头部按钮布局展示设置
        headerToolbar: {
          left: "title",
          center: '',
          right: 'prev today next',
        },
        events: this.monthData,   //展示日历里面的数据
        dateClick: this.handleDateClick, // 点击某一天 // 想要触发dateClick事件必须先安装引用interaction插件
        eventClick: this.eventClick,
        eventDidMount: this.eventDidMount,
        eventWillUnmount: this.eventWillUnmount,
        eventResizeStop: this.eventResizeStop,
        viewDidMount: this.viewDidMount,
        //自定义 hander 头部 按钮
        customButtons: {
          YearOrMonth: {
            text: '自定义按钮1',
          },
          prevOrMonth: {
            text: '上一月',
            click: function () {
              alert('点击了自定义按钮!');
            }
          }
        },
      },
		monthData: [
        {
          title: 'eeeeeeeee', // 事件内容
          start: '2018-12-11', // 事件开始时间
          end: '2018-12-30', // 事件结束时间
          cssClass: 'red' // 事件的样式 class名（由后台返回数据） red为自己定义的class名
        },
        {
          title: 'sssss',
          start: '2021-11-25',
          cssClass: 'blue'
        },
        {
          title: 'dddddddd',
          start: '2021-11-09',
          cssClass: 'blue'
        },
        {
          title: 'cccccc',
          start: '2021-11-20',
          cssClass: 'red'
        },
      ],
    }

监听点击上下月按钮切换月份事件 监听点击今天按钮事件

 mounted () {

    this.monthPlan = new Date(),
    this.calendarApi = this.$refs.calendarRef.getApi()
    this.calendarApi.gotoDate(new Date) //跳转日期，
    this.$nextTick(() => {
      const prevBtn = document.querySelector('.fc-prev-button')
      prevBtn.addEventListener('click', () => {
        this.changeMonth()
      })
      const nextBtn = document.querySelector('.fc-next-button')
      nextBtn.addEventListener('click', () => {
        this.changeMonth()
      })
      const todayBtn = document.querySelector('.fc-today-button')
      todayBtn.addEventListener('click', () => {
        //渲染当月的里程
        this.getMonthMileFn()
      })
    })

对应的一些方法

 methods: {
    eventDrop (event) {
      //   console.log("拖拽事假,", event);
      if (this.nextMonth <= new Date().getTime(event.oldEvent._instance.range.start)) {
        event.revert(); //恢复原状  
        this.$message.warning("不可操作!")
        return
      }      
    },
    eventClick (event, el, jsEvent, view) {
      // 点击某个事件
      //   console.log(event);
    },

    getMonthMileFn () {
    //点击今天按钮 触发的事件
    },

    //监听日历，月份切换
    changeMonth () {
      console.log("月份已切换!");
      const text = document.querySelector('.fc-toolbar-title').innerText
      const year = text.substring(0, 4)
      let month = text.substring(5, 7)
      month = isNaN(month) ? text.substring(5, 6) : month
      //   const date = new Date(`${year}-${month}`)
      //   console.log(date);
      const dateStr = new Date(`${year}-${month}`)
    },

    // 上一年点击
    prevYearCustomClick () {
      console.log("你悄悄的点击了我!");
    },


    // 切换到上一页
    prevFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.prev()
    },
    // 切换到下一页
    nextFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.next()
    },
    // 切换到今天
    todayFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.today()
    },
    // 获取当前描述
    getCurrentTitle () {

    },
    // 切换显示类型
    changeViewTypeFn (type) {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.changeView(type) // , '2020-11-05'
    },

  
  
    // 事件被渲染
    eventDidMount (info) {
      //   console.log(info)
      console.log('事件被渲染');
      document.querySelector('.fc-prev-button').innerText = '上个月'
      document.querySelector('.fc-next-button').innerText = '下个月'

    },
    eventWillUnmount (info) {
      //   console.log(info)
      console.log("这是什么事件?");
    },
    // 新增事件后回调
    afterEventAdd () {
      console.log('afterEventAdd')
    },
    // 点击某一天
    handleDateClick: function (arg) {
      console.log('date click! ' + arg.dateStr)
    },
    eventResizeStop (event) {
      console.log('回调函数，当日程事件调整（resize）结束的时候触发');
    },
    viewDidMount (info) {
      console.log('日历组件渲染结束的时候触发');
    },
}

配图 附图