Vue日历组件FullCalendar使用方法

FullCalendar （全日历）Vue组件的使用
FullCalendar官方文档地址：https://fullcalendar.io/docs#toc

FullCalendar日历组件支持Vue React Angular Javascript

Vue2的框架示例：

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

<template>
  <div class="calendar-container">
    <FullCalendar :options="calendarOptions" :header="{ left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }" />
  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { getWeekNum, FormateDate,getWeek } from '../utils/dayformat'
export default {
  props: ['selectedDatesChange', 'selectedDates', 'DeleteTeacherLeisureDTOS'],
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      // Integer, default: 1 (Monday),
      isHighlighted: false,
      // FullCalendar 组件配置项
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
        initialView: "timeGridWeek",
        locale: "zh-cn", // 设置语言
        // initialView: 'dayGridMonth'
        nowIndicator: true,//根据当前事件显示刻度线

        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,dayGridWeek,dayGrid",
        },
        firstDay:1 ,//设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        height:1000,//设置日历高度
        events: [
       

        ], 
       
        dayHeaderFormat:(info)=>{
          // 格式化列头日期
          // console.log(info,'xxxxxxxx')
          console.log(info.date.marker,'xxxxxxxx')
          return   getWeek(info.date.marker)
        },
        //试图显示的数据
        eventDragStart: (info) => {
          console.log(info);
          console.log("拖拽开始");
        },
        eventDragStop: (info) => {
          console.log(info, '拖拽结束');
        },
        eventDrop: (info) => {
          // TODO 拖动结束修改原有的都开始时间和结束时间
          console.log('当拖动停止且事件已移至其他日期/时间时触发', info)
        },
        eventMouseEnter: (mouseEnterInfo) => {
          let Index = this.selectedDates.findIndex(item => {
            return item.id == mouseEnterInfo.event.id
          })
          console.log(Index);
          let doms = document.querySelectorAll('.fc-event')
          let parentEl = doms[Index].parentNode
          console.log(mouseEnterInfo,doms,parentEl,'鼠标移入' );
          let div = document.querySelector('.delete-div')
          // div.innerText = '删除元素'
          // div.className='delete-div'
          // div.onclick = (e) => {
          //   console.log(e,'eee');
          //   e.stopPropagation()
          //   e.preventDefault()
          //   console.log('点击删除');
          //   this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)
          // }
          if(parentEl.contains(div)){
            console.log('父元素包含子元素');
          }else{
            let div = document.createElement('div')
            div.innerText = '删除元素'
          div.className='delete-div'
          // div.onclick = (e) => {
          //   console.log(e,'eee');
          //   e.stopPropagation()
          //   e.preventDefault()
          //   console.log('点击删除');
          //   // mouseEnterInfo.jsEvent.stopPropagation()
          //   this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)
          // }
          // div.addEventListener('click', (e) => {
          //   console.log('点击删除');

          // })
          // div.onclick = (e) => {
          //   console.log(e,'eee');
          //   e.stopPropagation()
          //   e.preventDefault()
          //   console.log('点击删除');
          //   // mouseEnterInfo.jsEvent.stopPropagation()
          //   // this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)
          // }
            parentEl.append(div)

          }
          // this.$alert('是否删除', '', {
          //   confirmButtonText: '删除',
          //   type:'warning',
          //   showCancelButton:true,
          //   cancelButtonText:'取消',
          //   callback: action => {
          //     console.log(action);
          //     // this.$message({
          //     //   type: 'info',
          //     //   message: `action: ${action}`
          //     // });
          //   }
          // });
        },
        eventMouseLeave: (eventMouseLeave) => {
          console.log(eventMouseLeave, '鼠标移出事件');
          let doms = document.querySelectorAll('.fc-event')
          let Index = this.selectedDates.findIndex(item => {
            return item.id == eventMouseLeave.event.id
          })
          let parentEl = doms[Index].parentNode
          let div = document.querySelector('.delete-div')
          parentEl.removeChild(div)

        },
        nowIndicatorDidMount: (info) => {
        },
        eventClick: (eventClickInfo) => {
          console.log(eventClickInfo, '鼠标点击事件');
          console.log(eventClickInfo.event.id)
          this.$emit('DeleteTeacherLeisureDTOS', eventClickInfo.event.id)
            // let INdex = this.calendarOptions.events.findIndex((item) => {
            //     return item.id == eventClickInfo.event.id
            // })
            // if(INdex != -1){
            //     this.calendarOptions.events.splice(INdex,1)
            // }
        },
        // 字体颜色 
        eventTextColor: "#000000",
        eventBackgroundColor: "#F3E86A",//选中时间背景颜色
        eventBorderColor: "#F3E86A", //选中的时间边框颜色
        selectable: true,
        // selectMirror: true, //显示镜像
        editable: true, //是否允许修改日历
        // droppable: true, // 在日历之间拖拽
        // unselectAuto:false,//取消用户自动选择
        dragScroll: true, // 拖拽滚动
        // unselectCancel:'', //取消选择取消
        selectOverlap: function (event) {
          console.log(event);
          //选择重叠
          return event.display === "background";
        },
        dateClick: function (info) {
          /*日期选择*/
          console.log(info);

        },
        select: (selectionInfo) => {
          let object = {

            start: FormateDate(selectionInfo.start, 'YYYY-MM-DD HH:mm:ss'),
            end: FormateDate(selectionInfo.end, 'YYYY-MM-DD HH:mm:ss'),
            dayOfWeek: getWeekNum(selectionInfo.start),
            title: "可约"
          }
          //选中事件
          // console.log(selectionInfo);
          // this.calendarOptions.events.push(object);
          this.$emit('selectedDatesChange', object)
        },
        unselect: (jsEvent, view) => {
          console.log(jsEvent, view);
        },
        // buttonText: {
        //   // 设置按钮
        //   today: "今天",
        //   month: "月",
        //   week: "周",
        //   dayGrid: "天",
        // },
      },
    };
  },