vue2 FullCalendar 数据初始化

在Vue 2中使用FullCalendar时，数据初始化通常涉及以下几个步骤：

1. **安装依赖**：首先需要通过npm或yarn安装fullCalendar库和相关的vue-full-calendar插件：

   npm install fullcalender vue-full-calendar

2. **组件引入**：在你的Vue组件中导入并使用fullCalendar组件：

   <template>
     <full-calendar :options="calendarOptions" />
   </template>

   <script>
   import FullCalendar from 'vue-full-calendar';
   export default {
     components: { FullCalendar },
     data() {
       return {
         calendarOptions: {}, // 初始化配置项
       };
     }
   };
   </script>

3. **配置数据**：在`data`对象中创建一个名为`calendarOptions`的对象，包含fullCalendar的各种选项，如事件源、视图模式等：

   data() {
     return {
       calendarOptions: {
         events: [], // 例如：['event1', 'event2'] 或者从API获取的事件列表
         initialView: 'month', // 视图切换默认选项
         ... // 其他配置项，如 eventDrop、eventResize 等
       },
     };
   },

4. **响应式更新**：如果你想动态添加、删除或修改事件，可以监听Vue实例的数据变化，并相应地更新`events`属性：

   watch: {
     someDataThatChangesEvents(newData) {
       this.calendarOptions.events = newData;
     },
   },

5. **渲染日历**：现在你应该能够在页面上看到一个初始化的FullCalendar实例了。