在Vue中引入fullcalendar制作课程表

最近在做项目中用到了FullCalendar来实现课程表功能，在此记录一下该库简单用法
以下为效果图

想看项目具体实现可前往我的github

安装

FullCalendar的功能被分解为“插件”。如果您需要它提供的功能，您只需要包含一个插件
官方文档

也就是说你需要任何扩展FullCalendar的功能的插件都得单独下载并引入，以下下载FullCalendar的核心包及vue版本和月日期视图

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

初始化

引入FullCalendar并注册该组件，同时引入月日历视图插件

//引入包
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // 注册组件
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]//引入插件
    }
  }	
}

<template>
  <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
template>	

同时还要引入CSS样式，否则渲染出来的日历将无样

<style >
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
style>

以上完整显示出一个月日历视图，此时的月日历未传入事件，因此无任何安排，是一个空的月日历视图

传入事件

当向FullCalendar组件传入事件时，组件则会根据传入事件的属性，显示在日历表上

<FullCalendar
  defaultView="dayGridMonth"
  :plugins="calendarPlugins"
  :weekends="false"
  :events="[
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]"
  />

events的格式还可以如下：

data(){
  return{
	  events:[
		  {
			title:'语文',//在视图显示的文本
			start: '2020-06-20T10:30:00',//事件开始时间，若在周日历视图中则为事件开始时间
			end: '2020-06-20T12:00:00',//时间结束时间
			extendedProps:{//其他杂项属性可定义在extendProps中，即非标准属性
			    site: 'A-401'//上课教室
			}
		  }
		]
	}
}

events具体其他属性可参考此处

设置header

可设置日历toolbar

<FullCalendar
      locale="zh-cn"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :buttonText="buttonText" 
      />

显示在页头按钮上的文本

data () {
    return {
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '天'
      }
    }
  }

关于Toolbar具体设置点击此处

点击事件查看详情

触发eventClick事件必须先安装interaction插件
npm install --save @fullcalendar/interaction

<FullCalendar @eventClick="handleEventClick" />

handleEventClick (info) {
      console.log(info)
    }

具体使用