完整日历时间轴视图的最后一列总是更宽

Question

我已经为完整日历调度程序(timelinecstommonth, timelinecstomweek, timelinecstomday)的时间轴视图创建了自定义视图。

但是，无论在什么分辨率下，最后一列总是比前面的列宽。

我可以告诉你，这不是另一个CSS文件的问题，因为我排除了所有的CSS文件，除了一个完整的日历，问题是一样的。

Fullcalendar v3.0.1Fullcalendar-Scheduler v1.4.0

这是我的javascript fullcalendar初始化:

$("#calendar").each(function () {
    var calendar = $(this);
    calendar.fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right:       'timelineCustomMonth,timelineCustomWeek,timelineCustomDay,listMonth'
        },
        firstDay: 1,
        eventLimit: true,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        resources: {
            url: '/machines',
            dataType: 'json'
        },
        resourceAreaWidth: "15%",
        events: {
            url: '/events',
            dataType: 'json'
        },
        views: {
            timelineCustomMonth: {
                type: 'timeline',
                duration: {month: 1},
                slotWidth: 5,
                slotDuration: {days: 1},
                slotLabelFormat: [
                    'D',
                    'dd'
                ]
            },
            timelineCustomWeek: {
                type: 'timeline',
                duration: {days: 7},
                slotWidth: 5,
                slotDuration: {hours: 4},
                slotLabelInterval: {hours: 4},
                slotLabelFormat: [
                    'D',
                    'H'
                ]
             },
            timelineCustomDay: {
                type: 'timeline',
                duration: {days: 1},
                slotWidth: 5,
                slotDuration: {minutes: 30},
                slotLabelInterval: {hours: 1},
                slotLabelFormat: [
                    'H'
                ]
            }
        }
    });
});

以下是出现问题的不同视图的两个截图:

timelineCustomMonth

timelineCustomDay

Answer 1

在我的例子中，设置slotWidth为一个相对值(5%)修复了最后一列伸展的问题。

$('#schedule').fullCalendar({
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        now: new Date(),
        slotWidth: "5%",
        resourceAreaWidth: '200px',
        contentHeight: 'auto',
        eventOverlap: false,
        selectOverlap: false
        ...
});

Answer 2

如果有人仍然遇到这样的问题，请参考下面的完整日历Github问题链接，它包含了导致问题的原因以及如何修复它的完整解释@arshaw(主要贡献者之一):

Chrome 91更新导致时间线v4位置不正确