在Vue框架下使用Fullcalendar

Fullcalendar是一款用来管理日程安排、工作计划的日历工具，它功能非常强大而且非常实用。

因为工作的需要，我对vue的了解并不深，对Fullcalendar更没有了解，纯属功能的需要，大概花了一天的时间学习了一下，学习一样东西应该去看官网或者去看github里面的项目这样可以快速上手。学习总结一下方便自己查找
Fullcalendar github
官网
v4和v5更改，看文档少走弯路
第一步是安装与FullCalendar相关的依赖项

npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

然后，您可以开始编写一个利用该组件的父组（DemoApp.vue）：

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

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
    calendarOptions: {
                    plugins: [
                      dayGridPlugin,
                      timeGridPlugin,
                      interactionPlugin, // needed for dateClick
                    ],

                    locale: 'zh-cn', // 切换语言，当前为中文
                    headerToolbar: {
                      left: "prev,next today",
                      center: "title",
                      right: "dayGridMonth,timeGridWeek,timeGridDay",
                    },
                     buttonText: {
                              today: '今天',
                              month: '月',
                              week: '周',
                              day: '日',

                            },

                    initialView: "dayGridMonth",// 指定默认显示视图
                    selectable: true,
                    selectMirror: true,
                    dayMaxEvents: true,
                    weekends: true,
                    allDayDefault:false,
                    // eventDisplay:'block',
                    moreLinkContent :'更多',//4.0  eventLimitText :'更多'
                    dayMaxEventRows :true,
                    slotDuration : "00:10:00",  //一格时间槽代表多长时间，默认00:30:00（30分钟）
                    slotMinTime: "08:00:00",
                    slotMaxTime: "24:00:00",
                    allDayText : "全天",
                    handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。
                     lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
                    firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
                    selectEventOverlap: false,
                    events: [

                           ]
                 },
      
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

动态绑定数据

for (var s of res.dataList) {
		var date= Global.formatDate(s.sendDate, "yyyy-MM-dd");
		this.calendarOptions.events.push({
		      title: '预约人:'+s.userName+'\n检测名称:'+s.sampleName+'',
		      start:  date, 
		  })
}