How can I make sticky date header of Angular Gantt view?

The horizontal (date/time) header is sticky by default. You just need to set the height properly.

For all options, please see the Scheduler height topic in the documentation (the Gantt chart uses the Scheduler internally):

https://doc.daypilot.org/scheduler/height/

To integrate the Gantt chart into your page, use heightSpec: "Parent100Pct" or heightSpec: "Max100Pct" and insert it into a non-scrolling parent element with a fixed position, as described here:

https://doc.daypilot.org/scheduler/100-pct-height/

I set heightSpec: "Auto", Because I have too much data.

Using heightSpec: "Auto" will not let you freeze the time headers. You'll need to switch to heightSpec: "Parent100Pct" or heightSpec: "Max100Pct" and use the Scheduler scrollbar instead of the page scrollbar to scroll vertically.

Please see also a detailed explanation here:
https://code.daypilot.org/75104/angular-scheduler-full-screen-layout

Can I share my screen to show you actually what is the problem?

Well, I believe the problem is as follows:

In your screenshots, I can see that you have two vertical scrollbars. If you scroll using the parent scrollbar (which belongs to the whole page or to one of the parent elements) the Scheduler time header will go away.

You need to redesign your page and get rid of the parent scrollbar. Make the parent element fixed and fill the available space with the Gantt chart component using heightSpec: "Parent100Pct". That way the only the internal Gantt chart vertical scrollbar will be displayed and the time header will stay in place during scrolling.

I recommend going through the tutorial I linked above to get a detailed description of the mechanism.

Thanks, That tutorial is working fine with the scheduler. But I'm facing an issue with the Gantt chart. If set heightSpec: "Parent100Pct" or heightSpec: "Max100Pct", then right side chart height is stick to 30px or 40px szie.

I mean chart aria is stick to 30px or 40px and Left side project name aria also stick to 400px to 500px.

https://ibb.co/2MX4pSn

Have look at the screenshot.

There turned out to be some issues with the height change detection in the latest release. These issues shouldn't affect the initial rendering though.

Anyway, these issues are now fixed in the latest sandbox build (2021.3.5094) and there is a new tutorial available that explains how to use the Parent100Pct and Max100Pct modes in the Angular Gantt chart component:

https://code.daypilot.org/49000/angular-gantt-chart-full-screen-layout

The tutorial includes a sample Angular project for download.

Please let me know if it doesn't work as expected.

I have the 2018 version of Daypilot. Should I update my version? If I update to the latest one, Will it affect my current project code.

Yes, you'll need to update in order to apply this fix.

It looks like you are affected by other issues (that have been already fixed) as well. In the latest release, the Gantt chart renders with a correct height in the Parent100Pct mode.

Generally, the API is backwards compatible but some changes are introduced from time to time. The releases with API changes are marked in the history:

https://javascript.daypilot.org/history/

See the individual version notes to find instructions on how to revert to the previous the behavior.

If you experience any problems during the update, you can post a question here in the forum and I'll try to help.

Thanks for your quick reply. I'm going to update my version. If I will face any issue. I will let you know.

I'm still facing this issue after updating my version also.

https://ibb.co/2MX4pSn

I tried with both "Parent100Pct" or "Max100Pct"

You'll need to review the dimensions of the parent element - make sure that it is positioned and that it has the right size. The parent element needs to have the right dimensions even without any content. The Gantt chart will not stretch the content, it will fill whatever is available.

Take a look at the structure of the HTML in the tutorial. That will be a good starting point:
https://code.daypilot.org/49000/angular-gantt-chart-full-screen-layout

Thanks, It's worked very well.