vue使用FullCalendar插件（基本）

桂圆干龙眼

已于 2022-08-01 17:25:41 修改

阅读量6w

点赞数

CC 4.0 BY-SA版权

分类专栏： IT fullcalendar vue 文章标签： vue

于 2020-04-09 18:40:59 首次发布

本文链接：https://blog.csdn.net/weixin_42617600/article/details/105416930

IT 同时被 3 个专栏收录

3 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

fullcalendar

2 篇文章

订阅专栏

安装

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

导入

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

 components: {
    FullCalendar //注册
  },

引入

@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";

初始化


<template>
 	<FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>
<script>

data() {
   return {
     calendarPlugins: [
       dayGridPlugin,
       timeGridPlugin,
       interactionPlugin
     ],
   };
 }