vue中使用FullCalendar日历组件

最新推荐文章于 2025-07-17 13:50:03 发布

非线性定语从句

最新推荐文章于 2025-07-17 13:50:03 发布

阅读量3.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js js

本文链接：https://blog.csdn.net/weixin_44492275/article/details/120301720

本文详细介绍了如何在Vue项目中集成和配置FullCalendar，包括安装步骤、组件引入、配置项详解、内置函数应用以及动态刷新事件。适合初学者和开发者深入理解日历组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方地址:https://fullcalendar.io/
官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue
中文文档(jquery版本)地址:https://www.helloweba.net/javascript/445.html
目前没有vue的中文文档

在vue中安装fullcalendar

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

在项目中使用fullcalendar

import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'

下面的是根据需要什么视图就引入什么视图样式
样式请去官方的 https://fullcalendar.io/docs中的views中查看
在这里插入图片描述

import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

在export default 的 components中添加组件

  components: {
    FullCalendar
  },

引入后需要给fullcalendar进行配置

首先在fullcalendar的标签中使用options来给其添加配置项

<FullCalendar
        :options="calendarOptions" 
        ref="FullCalendar"/>

calendarOptions的内容
具体的配置内容可以参考https://www.helloweba.net/javascript/445.html

calendarOptions: {
			// 加载的视图
        plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],
        // 视图类型 初始显示的视图 视图名称规则 比如dayGridPlugin去掉Plugin 加上Month或者Week或者Day
        initialView: 'timeGridWeek',
        // 语言选项  设置为中文后 部分文本会替换为中文 但是不全面
        locale:'zh-cn',
        // 配置日历头部
        // 按钮: prev为切换(上)下一月(/周/日)   next today 跳转到今天    
        // 文本: title 年月(YYYY-MM)
        // 按钮: dayGridMonth月 timeGridWeek周 timeGridDay日
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        // 设置各种按钮的文字  默认是英文的
        buttonText:{
          today:'今天',
          month:'月',
          week:'周',
          day:'日',
          list:'表'
        },
        // 初始就存在的事件
        initialEvents: [
         {
          id: 1,
          title: `会议:xxxxxxxxx`,
          start: '2021-09-13' + 'T08:00:00',
          end: '2021-09-13' + 'T10:00:00',
        },
        {
          id: 2,
          title: `会议:xxxxxxxxx`,
          start: '2021-09-15'+ 'T10:00:00',
          end: '2021-09-15'+ 'T12:00:00',
        }],
        // 是否可拖拽
        editable: true,
        // 是否可选择添加
        selectable: true,
        // 选择时触发函数
        select: this.handleDateSelect,
        // 点击事项触发函数
        eventClick: this.handleEventClick,
        // 移动事项或者拓展事项时间触发函数
        eventsSet: this.handleEvents,
        // 全天行 的文本显示内容
        allDayText: '全天',
        // 最小时间
        slotMinTime:'07:00:00',
        // 最大时间
        slotMaxTime:'20:00:00',
      },

显示效果分别是
在这里插入图片描述

获得vue实例

通过官方提供的.getApi()方法
首先创建一个vue的实例 (ref ) FullCalendar

<FullCalendar
 :class="[$style.calenderDetail]" 
 :options="calendarOptions" 
 ref="FullCalendar"/>

在通过this.$refs.FullCalendar.getApi() 就能获得到实例了

let calendarApi =  this.$refs.FullCalendar.getApi()
// gotoDate方法是让当前视图跳转到指定日期的位置
console.log('this.$refs.FullCalendar.getApi()',calendarApi.gotoDate('2021-08-10'))

我在项目中用到的vue FullCalendar的内置函数以及配置项

通过这个实例获得的方法就和网上那些jquery中获得的函数一样,比如.fullCalendar( 'gotoDate', date )

 <FullCalendar v-if="isLoadingSucess"
        :class="[$style.calenderDetail]" 
        :options="calendarOptions" ref="FullCalendar"/>

// 切换到下一月/周/日
this.$refs.FullCalendar.getApi().next()
// 切换到上一月/周/日
this.$refs.FullCalendar.getApi().prev()
// 跳转到今天
this.$refs.FullCalendar.getApi().today()
// 跳转到指定日期  formatData是日期 格式为 yyyy-MM-dd
// 特别注意不要写例如 2021-8-7 必须是 2021-08-07  两位!!!
this.$refs.FullCalendar.getApi().gotoDate(formatData)
// 获得当前视图起始位置的日期
this.$refs.FullCalendar.getApi().getDate()
// 获得当前视图  里面有一些参数
this.$refs.FullCalendar.getApi().view
// 当前视图的类型
this.$refs.FullCalendar.getApi().view.type 
// 当前显示的事件(日程)的开始时
this.$refs.FullCalendar.getApi().view.activeStart
// 当前显示的事件(日程)的结束时
this.$refs.FullCalendar.getApi().view.activeEnd
// 这个应该是当前显示内容区域的日历引用 因为通过他可以获得内置的函数 (我也不确定 反正我是这么用的)
this.$refs.FullCalendar.getApi().view.calendar
// 获得当前所显示的所有事件(日程)
this.$refs.FullCalendar.getApi().view.calendar.getEvents()
// 向日历中添加事项
this.$refs.FullCalendar.getApi().view.calendar.addEvent({
  id: 1,
  title: `事项xx`,
  start: '2021-10-01' + ' 13:00:00',
  end: '2021-10-01' + ' 17:00:00',
  // 修改背景颜色
  backgroundColor:'#d8377a',
  // 修改边框颜色
  borderColor:'#d8377a',
})

对于需要重新刷新当前显示日历中的事件(日程)时

// 是需要先清除 当前显示的各个eventSource(事件源) 就是事件(日程)
this.$refs.FullCalendar.getApi().view.calendar.getEvents().forEach(eventSource => {
   eventSource.remove()
})
// 在将自己需要的内容加入  
// 如果是只添加一个事件其他不动的话就不需要清除

其他一些基本的日历设置

data() {
    let that = this
    return {
      createEventId: 0,
      calendarOptions: {
        plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],
        // 视图类型
        initialView: 'timeGridWeek',
        // 语言选项
        locale:'zh-cn',
        // 设置各种默认按钮的文字 没使用自定义按钮 并且 不需要在按钮添加自己的代码就直接用这个改一下显示文字就行
        buttonText:{
          today:'今天',
          month:'月',
          week:'周',
          day:'日',
          list:'表'
        },
        // 自定义头部按钮 因为要加一些自己的内容   自带的按钮未找到回调函数
        customButtons:{
          prevBack: {
            text: '后退',
            click: function(data) {
              that.$refs.FullCalendar.getApi().prev()
              // 自动一些内容
            }
          },
          prevGo: {
            text: '前进',
            click: function(data) {
              that.$refs.FullCalendar.getApi().next()
              // 自动一些内容
            }
          },
          ToToday: {
            text: '今天',
            click: function(data) {
              that.$refs.FullCalendar.getApi().today()
              // 自动一些内容
            }
          },
        },
        // 头部显示的功能 自定义按钮就显示在这
        headerToolbar: {
          left: 'prevBack,prevGo ToToday',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek',
        },
        // 初始化的事件
        initialEvents: [],
        // 是否可拖拽
        // editable: true,
        // 是否可选择添加
        // selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        // 选择时触发函数
        select: this.handleDateSelect,
        // 点击事件触发函数
        eventClick: this.handleEventClick,
        // 移动到事件上触发函数
        eventMouseEnter:this.handleEventMouseover,
        // 移动事件或者拓展事件时间触发函数
        eventsSet: this.handleEvents,
        // 全天行 的文本显示内容
        allDayText: '全天',
        // 是否显示全天
        allDaySlot: true,
        // 最小时间
        slotMinTime:'06:00:00',
        // 最大时间
        slotMaxTime:'21:00:00',
      },
    }
  },