@fullcalendar/vue 日历组件

功能：日程安排，展示日历，可以用来做会议日历，可以跨日期显示日程。

Fullcalendar+vue3 日历组件
参考文档：【vue2】一个完整的日历组件 fullcalendar，会议预约功能
中文说明文档：https://www.helloweba.net/javascript/454.html#fc-EventObject

效果图：

安装插件：

"@fullcalendar/core": "^6.1.15",

"@fullcalendar/daygrid": "^6.1.15",

"@fullcalendar/interaction": "^6.1.15",

"@fullcalendar/list": "^6.1.15",

"@fullcalendar/resource-timeline": "^6.1.15",

"@fullcalendar/timegrid": "^6.1.15",

"@fullcalendar/vue3": "^6.1.15",  // 注意！！！vue2是@fullcalendar/vue

"@tinymce/tinymce-vue": "^6.0.1",

实现代码（VUE2）：

一个实现Tooltip效果的插件（因为日历组件的title只能是单行，想展示更多信息会有局限。所以采用tooltip的方式来解决）：

npm --save install tippy.js

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

import FullCalendar from "@fullcalendar/vue";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";

//实现Tooltip效果的插件
import tippy from 'tippy.js' //引入 tippy.js
import 'tippy.js/dist/tippy.css' //引入 tippy.js
import 'tippy.js/themes/light.css' //引入主题
import 'tippy.js/animations/scale.css'


let startdate = 0 // view显示区域开始时间
let endDate = 0 // view视图显示区域结束时间
let initialDate = new Date()
export default {
  components: {FullCalendar },
  data() {
    return {
      calendarApi: null,
      calendarOptions: {
        plugins: [interactionPlugin, timeGridPlugin], // 需要用哪个插件引入后放到这个数组里
        initialDate: initialDate, // 日历第一次加载时显示的初始日期。可以解析为Date的任何值包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: 'timeGridWeek', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
        // firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        // weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
        allDaySlot: false,
        slotMinTime: '06:00:00',
        slotMaxTime: '24:00:00',
        expandRows: true,
        firstDay: '1',
        header: false,
        views: {
          timeGridWeek: {
            type: 'timeGridWeek',
            duration: { weeks: 1 }
          }
        },
        customButtons: {
          refreshButton: {
            text: '今天',
            // icon: 'el-icon-refresh-right',
            // color:'red',
            backgroundColor: 'yellow',
            click: this.handleRefetchEvents
          },
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          }
        },
        headerToolbar: {
          left: 'prev,next,refreshButton',
          center: '',
          right: ''
        },
        buttonIcons: {
          prev: 'chevron-left',
          next: 'chevron-right'
        },
        events: [
          {
            title: 'All Day Event',
            start: '2023-3-08',
            end: '2023-3-10',
            color: 'red',
            textColor: 'white',
            allDay: true
          }
        ], // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档

        eventResize: this.eventResize, // 修改日历日程大小事件
        eventClick: this.handleDateClick, // 点击事件时，触发该回调
        // eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
        eventMouseEnter: this.handleEventMouseEnter, // 鼠标悬停在事件上时，触发该回调
        dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
        datesSet: this.handleDateSet, // 获取view视图显示时间
        select: this.handleDateSelect, // 选中日历格事件
        selectable: true // 是否可以选中日历格
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi()
  },
  methods: {
    handleEventMouseEnter(info) {
      tippy(info.el, {
        appendTo: document.body,
        // content: info.event.extendedProps.username,
        content: "<div style='z-index:9999999'>地点重复</div>",
        // theme:'light',
        placement: 'top',
        arrow: true,
        allowHTML: true,
        // 鼠标放在提示中提示不消失
        interactive: true
      })
    },
    // 刷新
    handleRefetchEvents(mouseEvent, htmlElement) {
      this.refreshCalendar(initialDate)
      this.calendarApi.render()
    },
    refreshCalendar(newDateTime) {
      initialDate = newDateTime // 更新绑定的时间数据
      if (this.$refs.fullCalendar.getApi()) {
        this.calendarApi.gotoDate(newDateTime)
      }
    },
    nextClick(mouseEvent, htmlElement) {
      this.calendarApi.next()
    },
    prevClick(mouseEvent, htmlElement) {
      this.calendarApi.prev()
    },
    eventResize(eventResizeInfo) {
      const publicId = eventResizeInfo.event._def.publicId
    },
    // 点击事件
    handleDateClick(dateClickInfo, event) {
      let selectedBase = {
        start: dateClickInfo.event._instance.range.start,
        end: dateClickInfo.event._instance.range.end,
        publicId: dateClickInfo.event._def.publicId,
        title: dateClickInfo.event._def.title,
        backgroundColor: dateClickInfo.event._def.ui.backgroundColor,
        borderColor: dateClickInfo.event._def.ui.borderColor
      }
      const publicId = dateClickInfo.event._def.publicId
    },
    // 获取视图区域展示时间--开始日期、结束日期
    handleDateSet(datesSetInfo) {
      startdate = moment(datesSetInfo.startStr).unix()
      endDate = moment(datesSetInfo.endStr).unix()
    },
    handleDateSelect(dateClickInfo, event) { },
  },
  created() {

  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}