7

I have created custom views for the timeline view of the fullcalendar scheduler (timelineCustomMonth, timelineCustomWeek, timelineCustomDay).

However, the last column is always wider than the previous ones, no matter at what resolution.

I can tell that it's not a problem with another CSS file, because I excluded all CSS files except the one for fullcalendar, and the issue was the same.

Fullcalendar v3.0.1 Fullcalendar-Scheduler v1.4.0

This is my javascript fullcalendar initialization:

$("#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'
                ]
            }
        }
    });
});

These are two screenshots of different views where the problems occur:

timelineCustomMonth

timelineCustomDay

Thanks in advance.

Stefan
  • 71
  • 2

2 Answers2

0

In my case, setting slotWidth to a relative value (5%) fixed the problem with the last column stretching out.

$('#schedule').fullCalendar({
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        now: new Date(),

        slotWidth: "5%",

        resourceAreaWidth: '200px',
        contentHeight: 'auto',
        eventOverlap: false,
        selectOverlap: false
        ...
});
Didzis
  • 308
  • 3
  • 15
0

If someone is still encountering an issue with that, please, refer to the following full-calendar Github issue link, it contains a complete explanation of what causes the issue and how to fix it by @arshaw (one of the main contributors):

Chrome 91 update causes incorrectly positioned lines in timeline v4.

Mikalov
  • 11
  • 2
  • 6
  • Please don't post answers mainly containing a link, but rather summarize the linked content a little and explain why/how it helps. – ahuemmer Jul 16 '22 at 09:03