vue FullCalendar 全日历在Vue中项目使用

vue FullCalendar 全日历在Vue中项目使用

最近有个需求在vue中的日历操作，FullCalendar 原本是基于JQ的插件，关于vue中的使用资料很少，这里总结一下用到的地方。

首先是按照官网上面有关vue的使用 FullCalendar官网
安装依赖包 ：

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

再按需引入

<script>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the  tag available
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]
    }
  }
}

</script>

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


<style lang='scss'>

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

</style>

注意样式不能少 否则会直接报错。这样基本的模型就会出来了 然后就是根据需求自己配置使用事件。

这里是中文的Api文档可以借鉴 全日历中文Api

关系一些基本的配置和方法，网上例子很多可以查阅。
在vue中 如果要访问FullCalendar的API ，也就是使用它的一些方法设置日期的跳转，国际化等，需要

< FullCalendar ref=“fullCalendar” :plugins=“calendarPlugins” />
在方法中 需要 let calendarApi = this.$refs.fullCalendar.getApi()
获取这个对象

常用的如
calendarApi.gotoDate(date) 跳转日期，
calendarApi.getDate() 获取当前日期，
calendarApi.next() 跳转下一个月，
calendarApi.prev() 跳上个月，等等
获取日历国际化的方法 calendarApi.setOption(‘locale’, newlocale)，newlocale可以根据项目中配置好的国际化，或者直接用API中的国际化名称可以手动改变。
关于全日历最核心的还是它的事件数据 event 是一个数组

具体属性在中文API有，

更多可以去官网自己研究 https://fullcalendar.io/#demos