businessHours are not rendered properly in resourceTimelineMonth view when CSS margin and font-size are set

Bug Reports

Weekends are not rendered properly in v4 in resourceTimelineMonth view. They are misplaced along the x axis. Other views render weekends ok. Btw, I am using the default theme. I have an extra custom button which loads resources and events dynamically.

      businessHours: {
        daysOfWeek: [1, 2, 3, 4, 5],
        startTime: '08:00',
        endTime: '16:00'
      },

This happens both with Chrome, Safari and Firefox on MacOS. If I resize the browser, the glitch disappears. It looks like the left positions of the weekend highlights are not calculated correctly.

[arshaw]

yes, this problem will happen when a font is loaded after pageload and affects the dimensions. I can’t think of an elegant way to solve this other than have the dev make their own handler that calls updateSize. I actually had to do that for FullCalendar Scheduler’s homepage, using window.onload. see…

https://fullcalendar.io/assets-more/scheduler-index.js?1611535588

 // readjust sizing after font load
window.addEventListener('load', function() {
  calendar.updateSize();
});

[lucasbrtd]

Hi, I also encountered this render problem but I succeed to fix it by putting a listener on calendar loading and inside, update the size of the calendar :

calendar.on('loading', function () {
    calendar.updateSize();
});

I refer to the documentation here : https://fullcalendar.io/docs/handlers Hope it was helpful ! 👍