一、效果圖

image.png

官網(wǎng)地址：Vue Component - Docs | FullCalendar

二、安裝使用

1、使用 npm install 安裝下列依賴

image.png

2、在需要使用的頁面中引入

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

3、在頁面中引入需要的插件

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

4、在data中設(shè)置日歷的一些配置及屬性

data(){
  return{
     calendarOptions:{
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh',
        firstDay: 1,
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
          // list: "列表",
        },
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        weekNumberCalculation: 'ISO',
        nowIndicator: true,
        height:500,
        validRange: this.validRange,  //設(shè)置可顯示的總?cè)掌诜秶?        eventTimeFormat: { // 在每個事件上顯示的時間的格式
          hour: 'numeric', // numeric:2022,2-digit:22
          minute: '2-digit',
          meridiem: false,
          hour12: false // 設(shè)置時間為24小時
        },
        customButtons: {
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          }
        },
        editable: false, //允許拖動縮放，不寫默認就是false
        overlap: false, //允許時間重疊，即可以與其他事件并存，不寫默認就是false
        events: [], //背景色 (添加相同時間的背景色時顏色會重疊)
        datesSet: this.datesSet, //日期渲染；修改日期范圍后觸發(fā)
        eventClick: this.handleEventClick, //點擊日程觸發(fā)
        dateClick: this.handleDateClick, //點擊日期觸發(fā)
        eventDrop: this.calendarEventDropOrResize, //拖動事件觸發(fā)
        eventResize: this.calendarEventDropOrResize, //縮放事件觸發(fā)
        displayEventTime: false, //不顯示具體時間
      }
  }
}

5、在methods中添加點擊上一月、下一月和今天的事件

method:{
    nextClick() {
      this.$refs.fullCalendar.getApi().next() // 將日歷向前移動一步（例如，一個月或一周）。
    },
    prevClick() {
      this.$refs.fullCalendar.getApi().prev() // 將日歷后退一步（例如，一個月或一周）。
    }
}

6、在頁面初始化數(shù)據(jù)完成后進行數(shù)據(jù)整合 讓數(shù)據(jù)符合要求

  形如：
  obj={ id,title,start,end}
  this.calendarOptions.events.push(obj);

三、至此日歷模型已完成 后續(xù)有其他的修改可在此基礎(chǔ)上微調(diào)。