[ANGULAR] The initialization task date range is incorrect

[shimnx]

When I first enter the page, the date range on my right gantt graph is too long, and part of the task name on the left is invisible. How can this be adaptive

[alex.l]

You need to configure initial https://bryntum.com/docs/gantt/api/Gantt/view/Gantt#config-viewPreset
In docs you will find the list of pre-defined presets, you also can use your own setting or customize one of pre-defined

viewPreset : {
  base    : 'hourAndDay',
  id      : 'myHourAndDayPreset',
  headers : [
      {
          unit      : "hour",
          increment : 12,
          renderer  : (startDate, endDate, headerConfig, cellIdx) => {
              return "";
          }
      }
  ]
}

https://bryntum.com/docs/gantt/api/Scheduler/preset/ViewPreset
https://bryntum.com/docs/gantt/api/Scheduler/preset/PresetManager

[shimnx]

I modified base but it doesn't seem to work

viewPreset: {
            base: 'weekAndDay',
            id: 'myHourAndDayPreset',
            headers: [
                {
                    unit: "day",
                    increment: 12,
                    renderer: (startDate, endDate, headerConfig, cellIdx) => {
                        console.log(startDate, endDate, headerConfig, cellIdx)
                        return "";
                    }
                }
            ]
        },

[alex.l]

Please provide more details, how did you use that, what exactly didn't work for you? How to reproduce?

[shimnx]

You can run my code, the gantt diagram on the right doesn't show up when I initialize it

[alex.l]

I don't see any problems/errors after I opened the page as well as any viewPreset definition in your code.

[shimnx]

What I mean is that when the page is initialized, the task is not displayed on the gantt chart on the right, so you have to click Zoom to fit to see it. I hope that when I enter the page, I can see that the gantt chart on the right starts one week before the task starts and ends one week after the task ends

[alex.l]

Just use consistent data.
I see you set startDate/endDate for your timeAxis somewhere in 2019,

gantt.config.ts

    startDate: '2019-01-12',
    endDate: '2019-03-24',

but according to your tasks data, your project starts in 2022. I also don't see you set start/end date for your project, so it will be calculated automatically according to data. If you will display correct date range of timeAxis, you will see tasks.
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#field-startDate
https://bryntum.com/docs/gantt/api/Gantt/view/Gantt#config-startDate

Docs about tasks scheduling: https://bryntum.com/docs/gantt/guide/engine/gantt_events_scheduling