安装

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
     ],
   };
 }

效果图

在这里插入图片描述
vue使用fullCalendar(类似日程表)

Logo

前往低代码交流专区

更多推荐