vue+FullCalendar 根据不同时间修改事件颜色

可以通过 FullCalendar 提供的 `eventRender` 回调函数，来根据不同的时间段来修改事件的颜色。

首先，在定义 FullCalendar 实例时，需要设置 `eventRender` 回调函数，如下所示：

new FullCalendar.Calendar(calendarEl, {
  // 其他配置项
  eventRender: function(info) {
    // 在这里根据不同的时间段来修改事件的颜色
  }
});

然后，在 `eventRender` 回调函数中，我们可以通过 `info.event` 获取到当前事件的详细信息，包括开始时间和结束时间等。根据这些信息，我们就可以来修改事件的颜色了。下面是一个示例代码：

eventRender: function(info) {
  var event = info.event;
  var start = event.start;
  var end = event.end;

  // 根据事件的开始时间和结束时间来计算出事件的持续时间，单位为小时
  var duration = moment.duration(end.diff(start)).asHours();

  // 根据持续时间来设置不同的颜色
  if (duration < 2) {
    event.setProp('backgroundColor', 'red');
  } else if (duration < 4) {
    event.setProp('backgroundColor', 'yellow');
  } else {
    event.setProp('backgroundColor', 'green');
  }
}

在这个示例中，我们根据事件的持续时间来设置不同的颜色：如果持续时间小于 2 小时，就设置为红色；如果持续时间小于 4 小时，就设置为黄色；否则就设置为绿色。

当然，你也可以根据自己的需求来设置不同的颜色规则。