Vue中使用Fullcalendar思路

最新推荐文章于 2024-04-26 17:00:12 发布

yarKin.

最新推荐文章于 2024-04-26 17:00:12 发布

阅读量2.9k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54177757/article/details/126889428

版权

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