VueFullcalendar詳解

一、什麼是VueFullcalendar

1、VueFullcalendar是一個基於vue.js和FullCalendar.js的日曆組件。

2、FullCalendar是一個開源的日曆插件，可以用於在網站上顯示日曆、行程、活動等信息，支持多種視圖模式和事件選擇交互方式。

3、VueFullcalendar提供了一種方便快捷的方式來集成 FullCalendar 功能到 Vue.js 應用程序中，從而輕鬆地創建動態、交互性的日曆/行程/活動。

二、VueFullcalendar的使用

1、要使用VueFullcalendar，我們首先需要安裝FullCalendar這個插件

//安裝FullCalendar
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid moment

2、然後，我們需要在組件中導入FullCalendar和日曆所需要的視圖，以及事件交互的插件

//引入FullCalendar插件以及相應的VueFullcalendar組件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'

//在Vue.js組件中聲明FullCalendar組件
  components: {
    FullCalendar
  },

//為FullCalendar註冊所需的插件
  calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],

3、最後，在模板中使用FullCalendar標記，通過props將所需的選項傳遞給FullCalendar組件，其中最重要的是eventSources，它是一個承載日曆事件信息的數組，FullCalendar將根據這個數組來動態渲染日曆事件。

<!--在模板中使用FullCalendar標記，並為其props傳遞配置信息-->
  <FullCalendar
    defaultView="dayGridMonth"
    :plugins="calendarPlugins"
    :events="eventSources"
    @eventClick="handleEventClick"
  />

// 將eventSources傳遞給FullCalendar組件
  data() {
    return {
      eventSources: [
        {
          events: [
            {
              title: 'Meeting',
              start: '2022-04-07T19:00:00',
              end: '2022-04-07T21:00:00',
              extendedProps: {
                description: 'Meeting for discussing the new project',
              },
            },
            {
              title: 'Appointment',
              start: '2022-04-08T10:30:00',
              extendedProps: {
                description: 'Doctor appointment at 10:30 AM',
              },
            },
            {
              title: 'Interview',
              start: '2022-04-09T14:00:00',
              extendedProps: {
                description: 'Interview for the new job position',
              },
            },
          ],
        },
      ],
    };
  },

三、VueFullcalendar的配置選項

1、eventSources：用於指定日曆所需的事件數據，是一個數組類型

eventSources:[
  {
    events: [
     {
       title: 'Meeting',
       start: '2022-04-07T19:00:00',
       end: '2022-04-07T21:00:00',
       extendedProps: {
         description: 'Meeting for discussing the new project',
       },
     },
     //...
    ],
    color: 'red', //設置事件顏色
    textColor: 'white', //設置事件文本顏色
    backgroundColor: 'green' //設置事件背景顏色
 }
 //...
]

2、initialView：用於指定日曆的初始視圖，有dayGridMonth、dayGridWeek、dayGridDay、timeGridWeek、timeGridDay等多種視圖可供選擇。

initialView: 'dayGridMonth'

3、headerToolbar：用於配置日曆的標題欄，可以自定義按鈕和視圖的組合。

headerToolbar: {
  left: 'prev,next today',
  center: 'title',
  right: 'dayGridMonth,timeGridWeek,timeGridDay',
},

4、slotLabels：用於指定日曆視圖顯示的文字信息，包括周、月、日等視圖的顯示信息。

slotLabels: {
  day: '日',
  week: '周',
  month: '月',
}

5、slotDuration：用於指定日曆視圖中的時間間隔，比如『00:30:00』指每30分鐘一個時間間隔。

slotDuration: '00:30:00'

四、VueFullcalendar的時間處理

1、FullCalendar.js基於Moment.js庫進行日期時間的處理，因此，需要提前安裝Moment.js

npm install --save moment

2、在VueFullcalendar中，可以通過slotProps和eventRender等選項，對日曆事件的顯示進行自定義處理。

// slotProps用於傳遞日曆事件信息和當前視圖等信息到插槽中
  <template v-slot:eventContent="event">
    <div class="fc-content">
      <div class="fc-title">{{ event.event._def.title }}</div>
      <div class="fc-time">
        {{ event.event.start.format('h:mm a') }} -
        {{ event.event.end.format('h:mm a') }}
      </div>
    </div>
  </template>

// eventRender用於指定日曆事件的渲染方式
eventRender(info) {
  const tooltip = new Tooltip(info.el, {
    title: info.event.extendedProps.description,
    placement: 'top',
    trigger: 'hover',
    container: 'body',
  });
},

五、VueFullcalendar的交互功能

1、FullCalendar.js支持用戶交互操作，包括事件拖拽、調整、改變大小等。

// eventDrop用於指定日曆事件被拖拽時的處理方式
eventDrop(arg) {
  console.log(arg.event.start);
  console.log(arg.event.end);
  console.log(arg.event.allDay);
},

// selectable用於指定日曆是否允許被選擇，select用於指定選擇範圍後的處理方式
selectable: true,
select(info) {
  console.log(info.startStr, info.endStr);
},

2、FullCalendar.js還支持日曆事件的單擊、雙擊、右鍵菜單等交互方式。

// eventClick用於指定日曆事件被單擊時的處理方式
eventClick(info) {
  console.log(info.event.title);
},

// dateClick用於指定日曆中日期被單擊時的處理方式
dateClick(info) {
  console.log(info.dateStr);
},

六、總結

VueFullcalendar基於Vue.js和FullCalendar.js實現了一個功能豐富的日曆組件，可以方便地在Vue.js應用程序中集成交互性日曆，支持多種視圖模式和事件交互方式。在使用VueFullcalendar時，需要注意配置項的使用和事件的處理方式，可以根據需要自定義日曆的樣式和交互行為。