在Vue框架下使用Fullcalendar

Fullcalendar是一個非常受歡迎的日歷日程處理的js組件，它功能強大，文檔齊全，可定制化高，可與你的項目無縫對接。本站之前有很多文章介紹了Fullcalendar（v3）的使用。今天我們來看看如何在Vue框架下使用Fullcalendar。

查看演示下載源碼

安裝Fullcalendar

首先第一步當然是安裝FullCalendar相關的依賴。我們需要安裝Vue適配、核心包以及任何你想添加的功能插件。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

FullCalendar v4以核心代碼和插件形式提供給用戶安裝，因此我們需要哪些功能，就直接安裝對應的插件即可。使用時可以參照：功能插件列表。

如何使用

首先我們建立一個Main.vue文件，在模板中編寫：

<FullCalendar defaultView="dayGridMonth" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO" :eventTimeFormat="evnetTime" :header="header" @dateClick="handleDateClick" :plugins="calendarPlugins" :events="calendarEvents" @eventClick="handleEventClick" />

我們在<template/>中定義了<FullCalendar/>組件，包括屬性和方法。

defaultView：表示當前默認使用的是月份視圖，就是看到的是一個月的視圖。還有日視圖和周視圖等。

locale：本地化，我們使用中文簡體。

firstDay：一周的第一天，我們中文習慣是星期一是一周的第一天。

weekNumberCalculation：與firstDay配合，設置成ISO，一周第一天為星期一。

header：日歷的頭部設置，包括標題，左右按鈕設置等。

events：日程事件內容。

更多屬性方法可以查看文檔：官方文檔。v3中文文檔請移步：https://www.helloweba.net/javascript/445.html。

然后在javascript部分，先導入組件和樣式。

import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import '@fullcalendar/core/main.css';

接着，將數據定義好，包括接口、事件內容等等，以及方法調用。注意，需要使用Fullcalendar功能插件，必須在calendarPlugins定義好。

export default { components: { FullCalendar }, data() { return { calendarPlugins: [ dayGridPlugin, interactionPlugin ], header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, evnetTime: { hour: 'numeric', minute: '2-digit', hour12: false }, calendarEvents: [ { title: '部門會議', start: new Date() } ] } }, methods: { handleDateClick(arg) { if (confirm('您是否要在' + arg.dateStr + '添加一個新的事件?')) { this.calendarEvents.push({ // add new event data title: '新的事件', start: arg.date, allDay: arg.allDay }) } }, handleEventClick(info) { alert('Event: ' + info.event.title); info.el.style.borderColor = 'red'; } } }

保存，執行npm run dev，就可以看到Fullcalendar渲染的日程頁面了。

Fullcalendar官網還提供了在React和Angular框架下使用方法。

這是一個簡單的vue fullcalendar實例，更復雜高級的應用敬請關注本站后面推出的相關文章。