本文旨在让那些第一次在vue中使用FullCalendar但是又无从下手的小伙伴能够快速的上手FullCalendar。

如果英文比较好的小伙伴也可以移步 FullCalendar官网

介绍

FullCalendar，当下最受欢迎的全尺寸JavaScript日历

FullCalendar的三大特点：

• 强大轻巧：拥有100多种可自定义的设置。作为单独的模块构建，以减小文件大小。
• 开发人员友好：支持React、Vue、Angular三大主流框架
• 开源：所有代码都在GitHub上开源，但是也有一个非免费的“高级”版本

一、安装

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

这里要说一下，fullcalendar/vue 和 vue-fullcalendar 不是同一个东西，所以要注意安装的是前者还是后者。文中使用的是fullcalendar/vue 5.3.1，不同版本API也会稍有不同。如果需要其他组件亦可按需下载。

二、引入

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

这里没什么可多说的，就正常引入就可以了

三、使用

<template>
	<div>
        <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions"/>
    </div>
</template>


<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'

export default {
  components: {
    FullCalendar  // 像使用自定义组件一样使用
  },
  data() {
    return {
      calendarApi: null,
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ], // 需要用哪个插件引入后放到这个数组里
        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
        firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
        buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: '今天',
          month: '月',
          week: '周',
          day: '天'
        },
        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          right: 'today prev,next',
          center: 'title',
          left: 'dayGridMonth,dayGridWeek,dayGridDay'
        },
        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        events: [ // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档
            title: '标题',
            start: '事件开始事件',
            end: '事件结束事件' // 这里要注意，end为可选参数，无end参数时该事件仅在当天展示
            backgroundColor: '#FDEBC9', // 该事件的背景颜色
            borderColor: '#FDEBC9', // 该事件的边框颜色
            textColor: '#F9AE26' // 该事件的文字颜色
        ],
        customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
          today: {
            text: '今天', // 按钮的展示文本
            click: this.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
          },
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          }
        },
        eventClick: this.handleDateClick, // 点击事件时，触发该回调
        eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
        eventMouseLeave: this.handleMouseLeave， // 鼠标移除时，触发该回调
        dateClick： this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
      }
    }
  },
  mounted() {
    // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
    // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
    this.calendarApi = this.$refs.fullCalendar.getApi()  
  },
  methods: {
    handleDateClick(dateClickInfo) {
      console.log(dateClickInfo)
    },
    handleMouseEnter(mouseEnterInfo) {
      console.log(mouseEnterInfo.event.startStr)
      // 提示：mouseEnterInfo.event.startStr 可以获取当前事件的开始事件
    },
    handleMouseLeave(mouseEnterInfo) {
      console.log(mouseEnterInfo)
    },
    todayClick(mouseEvent, htmlElement) {
      calendarApi.today() // 将日历移动到当前日期。
      calendarApi.getDate() // 返回日期的日历的当前日期
    },
    nextClick(mouseEvent, htmlElement) {
      calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
    },
    prevClick(mouseEvent, htmlElement) {
      calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
    }
  }
}
</script>

以上为部分API的使用方法，这些基本可以满足一些简单的需求，更多API可以移步 FullCalendar官网。

结尾

如果这篇文章对你有用欢迎点赞、收藏、评论，如果有任何问题、意见和建议可以在评论区互相交流学习