如何解决FullCalendar 5.11中startTime和endTime设置无效的问题

你当前使用的businessHours仅用于标记工作时段、限制事件创建范围，不会改变日历视图默认显示00:00-23:00的时间区间。要修改视图实际显示的起止时间，需要用到minTime和maxTime配置项，以下是具体解决方案：

1. 全局统一设置（适合大部分时段一致的场景） #

直接在calendarOptions中添加minTime和maxTime，同时补全缺失的plugins配置（FullCalendar必须声明使用的插件才能正常渲染视图）：

export default {
  components: {
    FullCalendar 
  },
  data: function() {
    return {
      calendarOptions: {
        locale: trLocale,
        firstDay: 1,
        // 设置视图显示的起止时间
        minTime: '08:45',
        maxTime: '18:00',
        businessHours: [
          {
            daysOfWeek: [1, 2, 3, 4, 5], // 周一至周五
            startTime: '08:45',
            endTime: '18:00'
          },
          {
            daysOfWeek: [6], // 周六
            startTime: '08:45', 
            endTime: '12:30' 
          }
        ],
        // 必须声明使用的插件
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin]
      }
    }
  }
}

2. 针对不同日期动态调整（适合周六等特殊日期） #

如果需要让周六的视图仅显示到12:30，可以通过视图钩子动态修改minTime和maxTime：

export default {
  components: {
    FullCalendar 
  },
  data: function() {
    return {
      calendarOptions: {
        locale: trLocale,
        firstDay: 1,
        businessHours: [
          {
            daysOfWeek: [1, 2, 3, 4, 5],
            startTime: '08:45',
            endTime: '18:00'
          },
          {
            daysOfWeek: [6],
            startTime: '08:45', 
            endTime: '12:30' 
          }
        ],
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        views: {
          timeGridDay: {
            dayHeaderContent(info) {
              const day = info.date.getDay();
              // 周六单独调整显示范围
              if (day === 6) {
                info.view.setOption('minTime', '08:45');
                info.view.setOption('maxTime', '12:30');
              } else {
                info.view.setOption('minTime', '08:45');
                info.view.setOption('maxTime', '18:00');
              }
            }
          },
          timeGridWeek: {
            // 周视图保持全局工作时间范围，周六的时段通过businessHours标记
            minTime: '08:45',
            maxTime: '18:00'
          }
        }
      }
    }
  }
}

补充：minTime和maxTime支持HH:mm格式的字符串，也可以用分钟数（比如525代表08:45）。

内容的提问来源于stack exchange，提问作者azoss