在Vue中引入fullcalendar制作课程表

最新推荐文章于 2025-10-20 15:16:44 发布

原创

最新推荐文章于 2025-10-20 15:16:44 发布 · 3.8k 阅读

20 ·

CC 4.0 BY-SA版权

本文记录了在Vue项目中使用fullcalendar实现课程表功能的步骤，包括安装核心包、初始化组件、传入事件、设置header以及处理点击事件查看详情。详细介绍了每个步骤的代码实现，并提供了官方文档链接和示例代码。

最近在做项目中用到了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 ]//引入插件
    }
  }