VUE使用 FullCalendar 5.0 写日程安排

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

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

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #前端

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

FullCalendar

1 篇文章

订阅专栏

本文档介绍如何使用FullCalendar Vue组件创建日程排课应用，包括从安装、配置到切换日历视图的详细步骤。通过示例代码展示了如何设置初始日期、切换到周视图、设置时间范围以及响应日期和事件点击事件。同时提醒读者注意插件版本差异可能导致的问题，并提供了英文官方文档链接以供查阅。

最近要写个日程排课的业务，找到了FullCalendar的日期处理。网上的大部分都是老版本，试出了一堆的坑，看着文档，慢慢的敲出个大概。我写的这些如果帮不了你，你还是去看下文档，虽然是英文的，带能解除大部分的问题。FullCalendar文档地址。

贴一张效果图，如果和你的需求不一样，那就没办法了。

首先是安装插件

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

然后引入

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

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

这里是月日历，要改成周日历的话，需要安装

npm install --save @fullcalendar/timegrid

然后引入，（不一步一步的来了，其他的都配置上的区别了）

<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 // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
      	initialDate：new Date()//控制指定显示日期
        plugins: [ timeGridPlugin, interactionPlugin ],
        initialView: 'timeGridWeek'
        locale: "zh",//中文
        slotMinTime:'09:00',//展示时间
        slotMaxTime:'18:00',//展示时间
        dateClick: this.addEvent,//点击日历个空白触发事件
        eventClick: this.editEvent,//点击event触发事件
        events: [{
	        title:"",
			start:"",
			end:"",
			id:""
		}],//日程
      }
    }
  }，
  methods：{
  	addEvent(info) {
      console.log(info）
    },
    editEvent(info) {
      console.log(info）
    },
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>