Fullcalendar在Vue中的一些使用心得

1.序言

  这篇文章不包含Fullcalendar向Vue中集成的过程，因为此类教程在网上一搜就是一大把，如果你是为了继承，那请忽略此文章。
  这里主要介绍Fullcalendar一些常用的配置项，把我在实际工作中遇到的一些需求，和解决方案分享给大家，也许可以帮到你。

2.自定义View

  Fullcalendar默认有三个常用View类型，分别是dayGridMonth（月），timeGridWeek（周），timeGridDay（天）。
  此时有个需求为，需要增加一个View，为工作周View，也就是没有周六周日，只有周一到周五，此时用到了Fullcalendar的自定义视图，相关配置如下：

options:
{
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  headerToolbar: {
     left: 'prev title next today',
     center: '',
     right: 'dayGridMonth timeGridWorkWeek timeGridWeek timeGridDay'
   },
  //默认视图（周） 也可以定义为别的视图名
  initialView: 'timeGridWeek',
  views: {
    //自定义视图的类型
    timeGridWorkWeek: {
      //在周视图的基础上，来修改为工作周视图，因此type取值'timeGridWeek'
      type: 'timeGridWeek',
      //此配置项设为false则不显示周六周日，为true则显示，默认为true,因此这里设置为false
      weekends: false,
      //当使用headerToolbar的时候，button中显示的文字
      buttonText: 'work week'
    }
  }
}

3.绑定View切换事件

  如果没有特殊需求，只需要用headerToolbar中的按钮就可以实现View的切换。但是我这边有个需求是不能使用headerToolbar中的按钮，而是自定义一个下拉框，通过选择不同视图来切换视图。这就需要通过代码来切换View了。
  其实也很简单，只需要调用changeView方法即可，代码如下：

 viewChange(val) {
   //vue需要通过此方法来获取fullCalendar的API实例
   const calendarApi = this.$refs.fullCalendar.getApi()
   //val值为传入view类型 val='dayGridMonth' 则切换为月视图； 
   //val='timeGridWorkWeek' 则切换为工作周视图
   calendarApi.changeView(val)
 }

4.自定义Button

  自定义按钮非常简单，配置如下：

options:
{ 
  customButtons: {
    refreshButton: {
      text: '按钮显示的名称',
      click: function() {
        //点击按钮触发的功能 根据实际需求编写
      }
    }
  },
}

5.Event的样式修改

  当你需要修改FullCalendar的Event样式时，只需要修改两个参数即可。

options:
{ 
	events: [
				{
				  //日程标题
	              title: '提上日程',
	              //日程开始时间
	              start: '2022-7-12 10:00:00',
	              //日程结束时间
	              end: '2022-7-12 11:00:00',
	              //Event类名 可以在Style中定义样式 这里直接进入即可
	              className: 'evnet-class'
	              //Event的背景颜色
	              color: '#F9FBFF'
	            }
	],
}

6.设置工作时间

  设置工作时间就可以区分工作时间和非工作时间，两者的样式会不同。配置如下：

options:
{ 
  businessHours: {
    //周一至周五为工作日
    daysOfWeek: [1, 2, 3, 4, 5],
    //工作时间每天8点开始
    startTime: '8:00',
    //工作时间每天17点结束
    endTime: '17:00'
  },
}

7.自定义日历表头内容和样式

  这个需求也相对简单，只需要在dayHeaderContent函数中进行配置，就可以将表头随心所欲的修改了。

options:
{ 
   dayHeaderContent(item) {
   	 //这里可以写自己所以用的到的逻辑代码，item中的参数还是挺丰富的。
   	 //我只接触了item.isToday表示是否为今天，可以用于区分今天和其他日子，从未配置不同样式
   	 //item.date表示日期
     return {
       html: `<div>${item.date.getDate()}</div>`
     }
   },
}

8.同一时间段存在多个日程，显示会互相覆盖的问题

  这个应该是我遇到最棘手的问题，效果如下图所示。

  我想了很多办法，先是想通过强制写每个日程的宽度，让他们不覆盖，但是其中逻辑设计的太复杂，果然放弃了。
  后来我发现一个问题，覆盖情况的发生都是后者覆盖前者，如果把后者和前者的位置一调换，是不是就解决了。按着这个想法，于是遭到了eventOrder这个配置项。具体配置如下：

options:
{ 
	//duration 表示时间段 时间段越短 越排在前面
	//start 表示开始时间 开始时间越早 越排在前面
	//allDay 表示全天事件 全天事件优先排在前面
	//title 表示标题 标题首字符排序
	//此配置的优先顺序为：duration>start>allDay>title
	eventOrder: 'duration,start,allDay,title'
}

  配置之后，时间间隔长的就会排在后面，从而变相解决覆盖的问题。

  又发现了一个新的字段，可以完美解决日程互相覆盖的问题，只需要把配置项 slotEventOverlap：false ，即可完美解决日程互相覆盖的问题。

9.原创不易，转载请标明出处，谢谢