一 
    
    
  、npm 安装 Fullcalendar及相关插件

npm i --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list 说明: @fullcalendar/vue FullCalendar 的 vue 组件 @fullcalendar/daygrid 月视图插件(按需安装) @fullcalendar/timegrid 周视图和日视图插件(按需安装) @fullcalendar/interaction 接口插件(按需安装) @fullcalendar/list 日程视图插件(按需安装)

二
     


     


     
、引入并使用

<template> <FullCalendar ref="fullcalendar" :options=calendarOptions > <template v-slot:eventContent=arg> <b>{{ arg.timeText }}</b> <i>{{ arg.event.title }}</i> </template> </FullCalendar> </template> <script> import FullCalendar from @fullcalendar/vue import dayGridPlugin from @fullcalendar/daygrid import timeGridPlugin from @fullcalendar/timegrid import interactionPlugin from @fullcalendar/interaction import listPlugin from @fullcalendar/list export default { components: { FullCalendar // make the <FullCalendar> tag available }, data: function() { return { calendarOptions: { plugins: [ //配置日历插件 dayGridPlugin, timeGridPlugin, interactionPlugin,// needed for dateClick listPlugin ], //其他一些相关配置 } } } </script>

三 




 




 




、使用 FullCalendar提供的接口

1. 给 FullCalendar 配置 ref属性

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

2. 通过 ref 和 getApi() 调用 Fullcalendar 中的方法

this.$refs.fullcalendar.getApi().gotoDate(2021)

 具体配置信息和接口信息可参考以下链接： 

官方文档：http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文档翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

FullCalendar中文文档：API_Hesper_Pan的博客-CSDN博客_fullcalendar