Scheduler TimeHeaderRow incorrect width

Asked by Tim K.
5 years ago.

Hello,

we use previous/next navigation buttons to change displayed scheduler time range. In contrast to your demo (https://javascript.daypilot.org/demo/scheduler/nextprevious.html) we don`t want to show rowheaders, when there a no data rows.
When switching from a scheduler page with data and row headers, to a scheduler page without data, the newly available space is added as a grey area at the end of the timeheaderrow.
This issue interrupts the users experience.

To comprehend this issue, i`ve created this codepen: https://codepen.io/TORISO/pen/GRNYqWL?editors=1011
For simplicity there a only data displayed for March 2021. By switching to the next page, you see the issue. Notice that when pressing Next twice, the width calculation of timeHeaderRow is correct.

Thank you for your efforts!

version: 2021.1.4895

Answer posted by Dan Letecky [DayPilot]
5 years ago.

The auto-width features (row header width auto-fit and cell auto width) rely on the actual rendering to get some measurements. That happens in cases when it is not possible to calculate all dimensions in advance. If you don't display the grid it will have nothing to measure.

I recommend using a dummy row when there is no data to display to overcome this problem. This would save you a lot of headache.

You might be able to eliminate some (but maybe not all) issues by additional tweaks, e.g. you can reset the rowHeaderWidth before switching the date:

function changeDate(date) {
    dp.rowHeaderWidth = 0;
    dp.startDate = date.firstDayOfMonth();
    // ..
}

There is no problem with not displaying the grid if you don't use the auto-fit features.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.