vue 使用 FullClendar

1. 安装FullClendar插件 根据自己的需求安装基本功能还是高级功能。

   // 仅使用基本功能的 安装此命令
   npm install fullcalendar
   // 如若需使用高级功能（含基本功能） 使用此命令安装
   npm install fullcalendar-scheduler

    两种功能说明参考官网介绍：https://fullcalendar.io/docs/initialize-globals

2. 基本功能
   

   vue代码

   ?

   <template>

     <div>

       <FullCalendar :options="calendarOptions" />

     </div>

   </template>

    

   <script>

   import FullCalendar from "@fullcalendar/vue";

   import dayGridPlugin from "@fullcalendar/daygrid";

   export default {

     name: "WorkOrderSearch",

     components: {

       FullCalendar

     },

     data() {

       return {

         calendarOptions: {

           plugins: [dayGridPlugin],

           initialView: "dayGridMonth"

         }

       };

     }

   };

   </script>

   效果如图：

   

    

    

4. 2
5. 3
6. 4