如何仅在资源时间线首日应用类似slotMinTime的最小时间设置？

可以实现仅对资源时间线视图的起始日设置自定义起始时段，而后续日期保持完整时间轴显示，以下是两种实用方法：

方法1：通过datesRender钩子+CSS隐藏指定时段 #

这种方法无需修改全局配置，仅通过DOM操作控制起始日的时段显示：

1. 全局配置完整的时间轴范围，确保后续日期显示全部时段：

   slotMinTime: '00:00:00',
   slotMaxTime: '24:00:00'
   

2. 利用datesRender钩子定位起始日的时间槽，隐藏早于目标时间的部分：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const targetStartTime = '07:00:00';
  const targetStartHours = parseInt(targetStartTime.split(':')[0]);

  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    initialView: 'resourceTimelineThreeDay',
    views: {
      resourceTimelineThreeDay: {
        type: 'resourceTimeline',
        duration: { days: 3 }
      }
    },
    slotMinTime: '00:00:00',
    slotMaxTime: '24:00:00',
    datesRender: function(info) {
      const viewStartDate = info.view.currentStart.format('YYYY-MM-DD');
      const dayTimeSlots = document.querySelectorAll('.fc-timegrid-slot');
      
      dayTimeSlots.forEach(slot => {
        const slotHours = parseInt(slot.getAttribute('data-time').split(':')[0]);
        const slotDate = slot.closest('.fc-day').dataset.date;
        
        if (slotDate === viewStartDate && slotHours < targetStartHours) {
          slot.style.display = 'none';
        } else {
          slot.style.display = '';
        }
      });
    },
    resources: [
      { id: 'a', title: 'Resource A' },
      { id: 'b', title: 'Resource B' }
    ]
  });

  calendar.render();
});

方法2：动态修改全局slotMinTime配置 #

如果需要更精准的时段控制（避免CSS隐藏的布局问题），可以在视图渲染时动态切换slotMinTime：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const baseSlotMin = '00:00:00';
  const startDaySlotMin = '07:00:00';
  let calendarInstance;

  function renderCalendar(viewStart) {
    let currentSlotMin = baseSlotMin;
    // 判断当前视图的起始日是否需要特殊配置
    if (calendarInstance && calendarInstance.view.currentStart.isSame(viewStart, 'day')) {
      currentSlotMin = startDaySlotMin;
    }

    // 销毁旧实例并重新渲染
    if (calendarInstance) calendarInstance.destroy();

    calendarInstance = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
      initialView: 'resourceTimelineThreeDay',
      views: {
        resourceTimelineThreeDay: {
          type: 'resourceTimeline',
          duration: { days: 3 }
        }
      },
      slotMinTime: currentSlotMin,
      slotMaxTime: '24:00:00',
      viewRender: function(info) {
        renderCalendar(info.view.currentStart);
      },
      resources: [
        { id: 'a', title: 'Resource A' },
        { id: 'b', title: 'Resource B' }
      ]
    });

    calendarInstance.render();
  }

  // 初始化日历
  renderCalendar();
});

注意：方法2会在视图切换时重新渲染日历，可能有轻微性能损耗，但能保证时段配置的准确性。

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