Fullcalendar scrollToTime方法失效求助：页面无滚动

1. 先修复配置语法错误 #

你的代码存在两处语法错误，直接导致日历配置解析失败，钩子函数根本无法执行：

• views.timeGridDay下的titleFormat对象缺少闭合大括号
• 全局钩子（dateClick/eventDrop等）被错误嵌套在views.timeGridDay内部

修正后的完整配置：

this.calendarOptions = {
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin, multiMonthPlugin],
    themeSystem: 'bootstrap5',
    nowIndicator: true,
    initialView: 'timeGridDay',
    editable: true,
    views: {
        timeGridDay: {
            titleFormat: { year: 'numeric', month: 'short', day: '2-digit' }, // 补全闭合大括号
            slotLabelFormat: slotLabelFormat,
            allDaySlot: true,
            allDayText: 'All Day',
            dayMaxEvents: maxDisplay
        } // 补全views.timeGridDay的闭合大括号
    },
    // 全局钩子移到views外部
    dateClick: this.handleDateClick.bind(this),
    eventDrop: this.handleEventDrop.bind(this),
    eventResize: this.handleEventDrop.bind(this),
    eventsSet: () => { 
        this.fullcalendar?.getApi().scrollToTime("07:00:00");
    }
}

2. 换用更可靠的钩子时机 #

eventsSet仅在事件数据加载完成后触发，此时日历DOM可能还未完成重绘。推荐使用datesSet钩子——它在视图日期范围更新且DOM渲染完成后触发，更适合执行滚动操作：

datesSet: () => {
    const calendarApi = this.fullcalendar?.getApi();
    if (calendarApi) {
        // 传入毫秒数格式比字符串更可靠，07:00:00对应25200000毫秒
        calendarApi.scrollToTime(25200000);
    }
}

3. 确认日历实例获取正确 #

确保this.fullcalendar是正确的日历组件实例（比如Vue中通过ref绑定的实例）。如果是原生JS场景，直接保存初始化后的Calendar实例调用即可：

// 原生JS示例
const calendar = new Calendar(calendarEl, {
    // 配置项...
    datesSet: () => {
        calendar.scrollToTime(25200000);
    }
});
calendar.render();

4. 额外排查点 #

• 检查日历容器的自定义滚动样式，避免overflow属性设置干扰FullCalendar内部滚动逻辑
• 排查是否有其他JS代码修改了容器滚动位置，覆盖了scrollToTime的执行效果

内容的提问来源于stack exchange，提问作者mavilla vishnu vardhan