被FullCalendar日历组件卡住了

最新推荐文章于 2024-07-07 18:00:46 发布

皮卡皮一下

最新推荐文章于 2024-07-07 18:00:46 发布

阅读量790

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/hong0114/article/details/121910489

版权

element上明明有日历组件，为什么不用嘞？我不知道，这只是我接到的一个优化的任务，但是太难了，研究不出来。FullCalendar的官方文档说实话，本人太菜了看不太懂，我的优化任务是给每天的更多按钮上添加一个接口，上个懒加载，避免当天事件过多页面卡爆喽，但是我连个更多的按钮都找不到寻求各路大神无望，只能等原作者忙完再把任务还给人家了。

但是呢，我在搜索我的需求的时候发现这个组件也有很多人用的时候遇到的不同的问题，就比如说想加一个年视图，我的是vue下载引用的也不知道适不适用你们

<template>
  <div v-loading="loading">
    <FullCalendar ref="fullCalendar" :options="calendarOptions">
        
    </FullCalendar>
    
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
</script>

就是这个样子的，版本是5之后的

如果想添加年视图，首先在头部布局里面加上listYear

headerToolbar: { // 头部布局
          left: 'prev next',
          // left: '',
          // center: '',
          center: 'title',
          right: 'today dayGridMonth,timeGridWeek,resourceTimelineFourDays,listYear'
        },

然后还得有他的按钮

buttonText: { //各按钮的显示文本信息
          today: '今',
          month: '月',
          week: '周',
          day: '日',
          listYear: '年'
        },

最后给把他加在切图事件里面

// 视图切换事件
    datesSetClick(dateInfo) {
      // debugger
      switch (dateInfo.view.type) {
        case 'timeGridDay':
          this.params.cycleType = 0
          break
        case 'timeGridWeek':
          this.params.cycleType = 1
          break
        case 'dayGridMonth':
          this.params.cycleType = 2
          break
       case 'listYear':
        this.params.cycleType = 3
        break
      }

就这么简单