技术问询：能否在fullCalendar及资源调度器中隐藏特定时段（非置灰）

1. 能否在fullCalendar组件中隐藏一天中的特定时段？ #

当然可以！FullCalendar提供了多种灵活的方式来实现特定时段的隐藏，分两种常见场景来说：

• 固定时段隐藏：如果是每天都要隐藏固定的某几个小时（比如中午12点到14点），用CSS就能快速搞定。FullCalendar的每个时间槽都带有data-time属性，直接定位这些元素并设置隐藏即可：

  /* 隐藏每天12:00-14:00的所有时段槽 */
  .fc-time-grid-slot[data-time="12:00:00"],
  .fc-time-grid-slot[data-time="12:30:00"],
  .fc-time-grid-slot[data-time="13:00:00"],
  .fc-time-grid-slot[data-time="13:30:00"] {
      display: none;
  }
  

• 动态时段隐藏：如果需要根据日期、事件等动态调整隐藏的时段，可以在viewRender钩子中通过JS操作DOM。比如某天是节假日，要隐藏全天的某个时段，就可以在视图渲染时判断当前日期，然后给对应时段的槽添加隐藏样式。

另外，如果你只需要显示特定时间范围（比如只显示9:00-18:00），直接配置slotMinTime和slotMaxTime更简单，这相当于直接截断了显示的时间区间，不需要额外隐藏操作。

2. 在资源调度器示例中，能否隐藏店铺关闭时段，而非仅将该时段置灰显示？ #

必须能！默认的businessHours只会把关闭时段置灰，但要完全隐藏的话，有两种实用方案：

方案一：CSS精准定位（适合统一营业时间的场景） #

如果所有店铺的关闭时段一致（比如都是20:00到次日8:00），直接用CSS选择器定位对应时间槽隐藏：

/* 隐藏每天20:00至次日8:00的所有时段槽 */
.fc-time-grid-slot[data-time^="20:"],
.fc-time-grid-slot[data-time^="21:"],
.fc-time-grid-slot[data-time^="22:"],
.fc-time-grid-slot[data-time^="23:"],
.fc-time-grid-slot[data-time^="00:"],
.fc-time-grid-slot[data-time^="01:"],
.fc-time-grid-slot[data-time^="02:"],
.fc-time-grid-slot[data-time^="03:"],
.fc-time-grid-slot[data-time^="04:"],
.fc-time-grid-slot[data-time^="05:"],
.fc-time-grid-slot[data-time^="06:"],
.fc-time-grid-slot[data-time^="07:"] {
    display: none;
}

方案二：JS动态适配（适合不同店铺有不同营业时间的场景） #

如果每个店铺的营业时间不一样，可以结合resourceRender或viewRender钩子，根据资源的businessHours配置动态隐藏对应时段：

$('#calendar').fullCalendar({
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    resources: [
        { id: 'shop1', title: '店铺A', businessHours: { start: '08:00', end: '20:00' } },
        { id: 'shop2', title: '店铺B', businessHours: { start: '09:00', end: '19:00' } }
    ],
    resourceRender: function(resourceObj, $el) {
        // 获取当前资源的营业时间
        const openTime = resourceObj.businessHours.start;
        const closeTime = resourceObj.businessHours.end;
        // 找到该资源对应的时间槽列，逐个判断是否需要隐藏
        $el.closest('.fc-resource-area').find('.fc-time-grid-slot').each(function() {
            const slotTime = $(this).data('time');
            if (slotTime < openTime || slotTime >= closeTime) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    }
});

这种方法能针对每个店铺的营业时间精准隐藏关闭时段，完全替代置灰效果。

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