在Vue框架下使用Fullcalendar

Fullcalendar（v4）是一個很是受歡迎的日曆日程處理的js組件，它功能強大，文檔齊全，可定製化高，可與你的項目無縫對接。今天咱們來看看如何在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實例，有關Fullcalendar的應用敬請關注文章:

使用Fullcalendar管理日程事件(增刪改查拖放)

使用Fullcalendar管理時間計劃調度安排