Gantt chart dates not work sometimes added 2 day more other times

[Juan Camilo Cardona Graciano]

Hello, I am using the gantt chart but it does not work well does not properly recognize the format of dates and sometimes adds extra days.

Attachment: screenshots_f755ebd.zip

[Jesus Arockia Sankaran S]

Hi Juan, 

 

Thanks for Contacting Syncfusion support. 

 

In the attached screenshot, the date given in the data source(02/02/2020) lies in the weekend.  

In Gantt, we are validating the dates based on various properties such as dayWorkingTime, workWeek, includeWeekend, holidays and predecessorMapping. By default the value of  includeWeekend is false. Hence the dates are validated, so that the tasks lies in the very next working day. To show the date as given in the data source, we need to make 24 hours as working day by specifying the dayWorkingTime range as 0 to 24 and also we need to enable includeWeekend property to make the weekends also as working days. When predecessor is mapped, dates are validated based on the predecessor values. To disable the predecessor validation, we need to disable the property enablePredecessorValidation. When duration field is mapped, end dates are calculated based on the start date and duration. To show the end date as same as the date given in the data source we should not map duration field. Please refer the below code snippet for this. 

 

[app.component.html] 

<ejs-gantt id="ganttDefault"  

         [dayWorkingTime]="dayWorkingTime" [includeWeekend]="true" [enablePredecessorValidation]="false"> 

</ejs-gantt> 

 

[app.component.ts] 

export class AppComponent { 

       //... 

    public dayWorkingTime: object; 

    public ngOnInit(): void { 

       //... 

       this.dayWorkingTime = [{ from: 0, to: 24 }]; 

    } 

} 

 

Please find the below sample link. 

Sample - https://stackblitz.com/edit/angular-xf6gke-se6fdu 

 

Please get back to us if you require further assistance on this. 

 

Regards, 

Jesus Arockia Sankaran S 

[Juan Camilo Cardona Graciano]

Tahnk you, works, other  doubt how can I  set a default zoom

[Karthikeyan Raja]

Hi Juan,  

 

We can change the default zoom level at load time, by using timelineUnitSize property. Using this property we can customize the timeline schedule width as per requirement.   

We can also dynamically change the zooming levels by using toolbar items.   

Please find the below code example.  

[app.component.html]  

<ejs-gantt id="ganttDefault"   

   [toolbar] = "toolbar" [timelineSettings] = "timelineSettings">  

</ejs-gantt>  

[app.omponent.ts]  

export class AppComponent {  

    public timelineSettings: object;  

    public toolbar: string[];  

    public ngOnInit(): void {  

        //...  

        this.timelineSettings = {  

            timelineUnitSize: 150,  

        };  

        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll','CollapseAll', 'ZoomIn', 'ZoomOut'];  

    }  

}  

 

Please find the below sample link.  

Sample - https://stackblitz.com/edit/angular-xf6gke-2qrydc?file=app.component.ts  

 

Please get back to us if you require further assistance on this. 

  

Regards, 

Karthikeyan Raja