Vue日历组件FullCalendar使用方法

FullCalendar （全日历）Vue组件的使用
FullCalendar官方文档地址

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].parentNodeconsole.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].parentNodelet 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: "天",// },},};},