Vue中使用Fullcalendar思路-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中使用Fullcalendar思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、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>