vue+fullcalendar实现读取接口数据实现日历日程事件显示

本来打算使用antdesign来实现的，但是奈何没看懂他的徽标在calendar组件里的显示逻辑（我太菜了hhhhhhhh），所以网上找了一番，发现fullcalendar是个不错的替代插件。

安装

yarn add  @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid --save

npm方式安装也同理，不再赘述

代码实现

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
// 引入fullcalendar的部分插件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// 引入我在其他文件里自己定义的获取接口方法
import { getCA }  from '@/api/getCalendar';

export default {
  components: {
    FullCalendar // 引入fullcalendar模板
  },
  data () {
    return {
    // 配置fullcalendar，除了events数组，剩下的都可以不动
      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 :'更多',
        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: [
          // {
          //   id: 111,
          //   title: '任务1',
          //   start: '2022-08-01',
          //   end: '2022-08-11',
          //   color: '#ffcc99',
          //   editable: true, //允许拖动缩放，不写默认就是false
          //   overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
          //   }
          ]
      }
    }
  },
  methods: {
  // getList就是我把获取的接口数据写进calender的方法
    async getList() {
     const res  = await getCA()
     console.log(res.data.entry)
    console.log(res.data.entry.length);
     for (let i = 0; i< res.data.entry.length ;i++) {
      var obj = new Object()
      obj.id = res.data.entry[i].id,
      obj.title = res.data.entry[i].xiangmumingcheng + '——' + res.data.entry[i].lichengbeimingcheng
      obj.start = res.data.entry[i].created.slice(0,10)
      obj.end = res.data.entry[i].jiaofushijian.slice(0,10)
      obj.color = '#ffcc11'
      obj.overlap = true
      obj.editable = true
      console.log(res.data.entry[i].jiaofushijian.slice(0,10));
      this.calendarOptions.events.push(obj)
     }
    }
  },
  created () {
    this.getList()
  }
}
</script>

效果图

希望对你有帮助！