FullCalendar日历组件集成系列6——高级配置2

高级配置

设置工作时间

FullCalendar预置了设置工作时间功能，对应属性是businessHours，默认未开启。这个功能与我当前想实现的需求关系不大，但在某些应用场景下还是很有用的，因此也了解一下，放在这作为备忘。功能可以不用，但是得知道有。
该属性比较灵活，设置为true会开启，但默认是周一到周五，9:00-17:00，即标准的朝九晚五。

businessHours：true

也可以设置为对象，以下是设置周一到周五，8:00-17:30为工作时间。

businessHours: {
  daysOfWeek: [1, 2, 3, 4, 5],
  startTime: '8:00',
  endTime: '17:30'
}

还可以设置为数组，进行任意组合，例如常见的将工作日（周一到周五）和节假日（周六周日）分别设置不同的时间段。

需要注意的是，经测试，工作时间只是用白色背景标识，非工作时间用灰色背景标识，非工作时间依旧可以选中，添加事件等操作，即只影响显示，不影响功能。

FullCalendar提供了设置可用时间段的配置，不是businessHours，而是接下来要说的。

设置可用时间段

默认情况下，日历组件在周视图和日视图中，会显示从0点到23点全天时间段，如下所示：

但对于大多数人而言，夜里休息时间段并不会安排任务或日程，特别是早晨七八点以前，这部分区域没用，但会占用大块的屏幕，从而操作时需要通过拖动垂直滚动条来查看全天的日程情况。
如何控制有效时间段区域呢？
前面我们介绍过一个属性，businessHours，设置工作时间，但测试发现该属性只会影响显示（灰色背景），不影响操作（仍可新增或拖动事件）。

实际应该使用的属性是如下两个：

// 开始时间段
slotMinTime: '08:00:00',
// 结束时间段
slotMaxTime: '22:00:00',

设置后效果如下：

从应用角度考虑，每个人的工作和作息情况不一样，有早八点上班的，也有早九点上班的，甚至还有夜班人员，统一设置可用时间段并不合适，因此可以作为配置项，由用户自行设定，然后在页面初始化时，读取用户自定义的设置值，赋值给FullCalendar的calendarOptions选项即可：

// 初始化
init() {
  this.applyCustomSetting()
},
// 应用自定义配置
applyCustomSetting() {
  this.$api.mconfig.meetConfig.getMyConfig().then((res) => {
    const config = res.data
    // 使用自定义配置
    if (!config.startTime) {
      this.calendarOptions.slotMinTime = '00:00'
    } else {
      this.calendarOptions.slotMinTime = config.startTime
    }
    if (!config.endTime) {
      this.calendarOptions.slotMaxTime = '24:00'
    } else {
      this.calendarOptions.slotMaxTime = config.endTime
    }
   
  })
}

设置事件颜色

应用通常需要根据事件属性进一步来设置不同颜色，区分事件的类型、状态、重要程度或优先级。
例如，高优先级使用红色、中优先级使用黄色、低优先级使用绿色 。

有三个属性来细粒度控制：
backgroundColor：背景颜色
borderColor：边框颜色
textColor：文本颜色

在加载数据时，根据属性设置颜色，源码如下：

 // 加载数据
    loadData() {
      this.$api.personaltask.task.listWithChildren().then((res) => {
        if (res.data) {
          const eventArray = res.data.map((item) => {
            // 若起止时间均为00:00:00，则设置为allDay属性为true
            let allDay = false
            if (
              item.startTime &&
              item.endTime &&
              item.startTime.substr(11, 8) === '00:00:00' &&
              item.endTime.substr(11, 8) === '00:00:00'
            ) {
              allDay = true
            }
            // 根据优先级设置不同的颜色
            let color = '#000000'
            switch (item.priority) {
              case 'HIGH':
                color = '#FF0000'
                break
              case 'MEDIUM':
                color = '#FFFF00'
                break
              case 'LOW':
                color = '#00FF00'
                break
            }
            return {
              id: item.id,
              title: item.name,
              start: item.startTime,
              end: item.endTime,
              allDay: allDay,
              status: item.status,
              textColor: color
            }
          })
          this.eventData = eventArray
          this.filteData()
        }
      })
    }

效果如下：

这里发现一个问题：颜色设置对全天事件所有视图生效；对非全天事件，周视图和日视图生效，月视图无效，怀疑是组件bug或者设计时没有考虑到这方面。

尝试了另一种方式，覆写事件内容展示的回调方法eventContent。

 eventContent(arg) {
    let event = arg.event
    // 根据优先级设置不同的颜色
    let color = '#000000'
    switch (event.extendedProps.priority) {
      case 'HIGH':
        color = '#FF0000'
        break
      case 'MEDIUM':
        color = '#FFFF00'
        break
      case 'LOW':
        color = '#00FF00'
        break
    }
    this.eventData.forEach((item) => {
      if (item.id === event.id) {
        item.textColor = color
        return
      }
    })
    return '标题'
  }

测试发现，还是仅对全天事件生效，进一步印证了前面推测，对于非全天事件，不受textColor属性控制。

该方式不仅没达到目的，还得完全自己输出事件的内容展示（上面统一固化为“标题”仅为了测试颜色效果），此路不通，放弃。

设置事件排序

同一单元格内多个事件，显示时谁先谁后，如何控制？
组件内置了事件排序控制，其属性为eventOrder，可接受多类型的值（String / Array / Function），默认为"start,-duration,allDay,title"，代表优先按开始时间、持续时长、全天事件和标题排序。
其中duration前的减号，代表降序，无减号则代表升序。

官方预置的默认排序规则相对是最合理的选择了，此处不做调整，仅做备忘。
若日后需要按照优先级排序，可从该处着手探索解决方案。

设置时间片

这里的时间片说的是一个时间段，怎么理解呢？
默认情况下，FullCalendar组件左侧的纵轴标记了整点，每个小时内部又拆分为两段，即最小的时间片是半小时。

在新建事件或拖动事件时，会自动以时间片作为规划单位处理。
可以通过配置项slotDuration去调整，例如从30分钟调整为15分钟：

// 时间片
slotDuration: '00:15:00'

效果如下：
可以看到，一个小时被按15分钟的颗粒度拆成了四份，并且时间坐标轴增加了半小时显示。
当然，也可以进一步细拆，将时间片设置为10分钟甚至5分钟。
以下是将其设置为5分钟的效果：

具体设置为多大，看需求，一般情况下30分钟、20分钟、15分钟应该够了，只有需要精细化管理时，才需要设置为10分钟、5分钟甚至1分钟。

设置时间坐标显示

该控制与上面的时间片设置密切相关，可以通过slotLabelInterval属性来控制时间坐标轴的坐标显示，默认情况下FullCalendar内部会自动计算，上一章节中的截图就是自动处理的结果。
如果我们将时间片设置为5分钟，坐标轴的标识会每15分钟显示一次，如下图：

进行如下设置：

// 时间片
slotDuration: '00:05:00',
// 时间坐标轴的坐标密度
slotLabelInterval: '00:30:00'

效果如下：

可以看到坐标以半小时为单位标记，而不再是自动处理后的15分钟了。

此外，还有个相关的属性，时间坐标轴的显示格式化slotLabelFormat，一块说下，详见注释：

// 时间坐标轴的显示格式化
slotLabelFormat: {
  // numeric直接显示数字，个位数前面不补零，如上午9点显示为9，2-digit个位数前面补零，如上午9点显示为09
  hour: '2-digit',
  // 规则同上
  minute: '2-digit',
  // 是否忽略分钟数为0，为true，9点会显示9时，为false，会显示9:00
  omitZeroMinute: false,
  // 为true，12小时，为false，24小时
  hour12: false,
  // 显示上午、下午，英文语种下会附加显示AM、PM，中文语种下不显示，推测需要附加对应翻译
  meridiem: 'short'
}

效果如下：

应用系统

名称：遇见
地址：https://meet.popsoft.tech
说明：基于一二三应用开发平台和FullCalendar日历组件实现的面向个人的时间管理、任务管理系统，1分钟注册，完整功能，欢迎使用~