如何在FullCalendar 5中设置特定日期为非工作日？

首先注意你配置里的拼写错误：starTime应该改为startTime，否则原businessHours配置可能无法正常生效。

针对特定日期忽略businessHours并标记为全天非工作日，有以下几种可行方案：

方案1：使用nonWorkingDays选项（FullCalendar v5.10+ 适用） #

这是最简洁的方法，直接指定需要标记为非工作日的日期数组，优先级高于businessHours配置：

nonWorkingDays: ['2023-02-16'],
businessHours: {
  daysOfWeek: [1,2,3,4,5],
  startTime: '09:00',
  endTime: '18:00'
}

方案2：通过dayRender钩子手动修改（兼容旧版本） #

如果你的FullCalendar版本不支持nonWorkingDays，可以利用dayRender钩子对目标日期单元格进行样式和状态修改：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    businessHours: {
      daysOfWeek: [1,2,3,4,5],
      startTime: '09:00',
      endTime: '18:00'
    },
    dayRender: function(info) {
      const targetDate = '2023-02-16';
      const currentDateStr = info.date.toISOString().split('T')[0];
      
      if (currentDateStr === targetDate) {
        // 添加FullCalendar自带的非工作日样式类
        info.dayEl.classList.add('fc-non-business');
        // 可选：禁用该日期的交互（如点击创建事件）
        info.dayEl.style.pointerEvents = 'none';
      }
    }
  });
  calendar.render();
});

方案3：用businessHours数组覆盖特定日期 #

通过businessHours的数组形式，为目标日期添加一个覆盖规则，标记为全天非工作时段：

businessHours: [
  // 正常工作日时段配置
  {
    daysOfWeek: [1,2,3,4,5],
    startTime: '09:00',
    endTime: '18:00'
  },
  // 覆盖特定日期，设置为全天非工作
  {
    start: '2023-02-16T00:00:00',
    end: '2023-02-17T00:00:00',
    rendering: 'background',
    color: '#ffcccc' // 可选：自定义背景色标记非工作日
  }
]

内容的提问来源于stack exchange，提问作者Jose Maria Gomez