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,因此这里设置为falseweekends: 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>titleeventOrder: 'duration,start,allDay,title'
}

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

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

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