An error is reported when using view_modes

[mivvm]

view_modes = [
{
name: "Hour",
step: "8h",
padding: "2d",
date_format: "YYYY-MM-DD",
upper_text: (date) => {
const hours = date.getHours();
if (hours === 0) {
const month = date.getMonth() + 1;
const day = date.getDate();
return ${month}月${day}日;
}
return "";
},
lower_text: "HH",
},
]
The Gantt chart scrolls vertically first and then horizontally, with the top layer being disordered, and there is an error reported on the console.

https://codesandbox.io/p/sandbox/pm2g2j

[tanmaywankar]

The layout misalignment is caused by a function signature mismatch in your custom view_mode.

In Frappe Gantt, upper_text expects three arguments: (date, lastDate, language). Without comparing the current date to the lastDate, your code renders a label for every column, causing the SVG header to overflow and shift out of sync with the bars.
moreover the code also has a few typos which might be causing the console error.
the correct code should look like this:

view_modes: [
{
name: 'Hour',
step: '8h',
padding: '2d',
date_format: 'YYYY-MM-DD',
upper_text: (date, lastDate, language) => {
if (
!lastDate ||
date.getDate() !== lastDate.getDate()
) {
const month = date.getMonth() + 1;
const day = date.getDate();
return ${month}月${day}日;
}
return '';
},
lower_text: 'HH',
},
]