vue中使用FullCalendar日历插件

---

前言

因为要实现一个类似任务日历的功能，于是翻看了vue创造的日历组件发现不能符合要求的，所以又找了几个满足要求的日历组件。例如：calendar、react-big-calendar。
但查遍了百度发现基本没人用calendar，偶尔一两个也不是基于vue的，且官方文档也没有给出vue的实例，对不懂英语的搬运工及其不友好。
而react-big-calendar是专门为react开发而开发的，自然也找不到搬迁到vue的文章。
于是就经过多方查询，终于从茫茫人海中翻出了FullCalendar。

ps：2022/8/31 发现一个vue的FullCalendar封装插件：vue-lunar-full-calendar。但本博文已使用官方提供的插件，有兴趣的小伙伴可以自行了解。
vue-lunar-full-calendar文档

FullCalendar官方文档很友好的给了vue示例，甚至在github上最新的vite+typesript+vue3示例都有，属实牛逼。

一、FullCalendar兼容

FullCalendar 与Vue JavaScript 框架无缝集成。它提供了一个与 FullCalendar 标准 API 的功能完全匹配的组件。
最新版本的 FullCalendar 兼容 Firefox、Chrome、Safari、Edge 和 IE 11+。

二、使用步骤

1.引入库

代码如下（本文示例以vue2为主，vue3请前往官网查看示例）：

npm install @fullcalendar/daygrid 
npm install @fullcalendar/interaction 
npm install @fullcalendar/timegrid 
npm install @fullcalendar/vue 
npm install style-loader

直接一串下载

npm install @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid @fullcalendar/vue style-loader

2.载入使用

代码如下：

JS部分，暂时只写一些基础事件，足够看到效果。其他属性还没用过以后会补上。

// 在日历页面引入组件及插件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'

// 注册组件，定义基本数据
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data(){
  	return(){
		options:{
			locale:'zh-ch', // 中文展示，顶部title会转化为星期一、星期二的样式
			plugins: [ // 组件需要的插件（可根据需求引入）
	          dayGridPlugin,
	          timeGridPlugin,
	          interactionPlugin 
	       ],
	       headerToolbar: {
	          left: 'prev,next today',
	          center: 'title',
	          right: 'dayGridMonth,timeGridWeek,timeGridDay'
	       },
	       /* initialEvents:[{ //此方法适用于不变数据的渲染，如果需要动态的替换数据，请适用events
				id:'1',
				title:'数据源',
				strart:'2022-08-26', //在日历组件上开始的时间
				end:'2022-08-31' // 在日历组件上结束的时间
		   }], */
		   //events:此值接受json,数组等任何键值对的数据结构，修改的方式是简单粗暴的直接赋值，列：this.options.events = [];
		   events:[], 
		   select:this.handleDateSelect, // 选中日历表格事件
		   eventClick:this.handleEventClick, //选中数据源标事件
		   eventsSet:this.handleEvents //初始化日历事件
		}
	}
  }
},

html部分

<template>
  <FullCalendar
       class='demo-app-calendar'
       :options='calendarOptions'
     >
       <template v-slot:eventContent='arg'>
         <b>{{ arg.timeText }}</b>
         <i>{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
</template>

---

总结

例如：以上就是FullCalendar在vue中的基础应用，最好还是直接下载官方示例使用，本文也会随我的使用持续更新FullCalendar的用法。有事没事的小帅哥，靓女们点个关注谢谢啦。