功能：日程安排，展示日歷，可以用來做會議日歷，可以跨日期顯示日程。

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() {},
}