FullCalendar时间线月视图事件宽度与实际时长不符问题咨询

问题描述 #

使用FullCalendar的resourceTimelineMonth（时间线月视图）时，非全天时长的事件（例如4小时）会被显示为全天样式，仅切换到周或日视图时才会正常展示实际时长，需要实现月视图中事件宽度与实际时长精确匹配。

解决思路 #

默认的resourceTimelineMonth视图未配置时间槽长度，FullCalendar会将每个日期视为单一时间槽，导致非全天事件被拉伸至全天宽度。只需为该视图添加时间槽相关配置，让视图按小时拆分日期，事件就能根据实际时长自动调整宽度。

修改后的配置代码 #

var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    headerToolbar: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
    },
    initialView: 'resourceTimelineDay',
    scrollTime: '08:00',
    aspectRatio: 1.5,
    views: {
        resourceTimelineDay: {
            buttonText: ':15 slots',
            slotDuration: '00:15'
        },
        resourceTimelineTenDay: {
            type: 'resourceTimeline',
            duration: { days: 10 },
            buttonText: '10 days'
        },
        resourceTimelineMonth: {
            type: 'resourceTimeline',
            slotDuration: '01:00', // 设置每个时间槽为1小时
            slotMinTime: '08:00', // 限定视图起始显示时间
            slotMaxTime: '18:00', // 限定视图结束显示时间
            buttonText: 'Month'
        }
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: '/path/to/your/resources.json', // 替换为你的资源数据路径
    events: '/path/to/your/events.json' // 替换为你的事件数据路径
});

关键配置说明 #

• slotDuration: '01:00'：将每天拆分为1小时为单位的时间槽，让FullCalendar能基于事件的实际时长计算宽度
• slotMinTime 和 slotMaxTime：限定视图显示的时间段（示例为工作时间），避免展示全天24小时的槽位，优化视图高度和可读性
• 可根据需求调整slotDuration为更小单位（如30分钟），进一步提升精度

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