Customize taskbar

[Nikitha]

Hello,

I have a requirement on showing a part of the taskbar as "colored" or "bottle-necked" ie.,when there is a holiday for the taskbar(activity).

I have defined holidays for the whole project. Additional to that I have another set of holidays for the taskbar.

How do I achieve that using templateTaskbar? Is it possible to render the taskbar in any of the given case below?

Thank you,

Nikitha R

[Pooja Priya Krishna Moorthy]

Hi Nikitha, 

 

In Gantt, we don’t have in-built support to achieve this requirement, but we can highlight ranges with different colors in taskbar by using queryTaskbarInfo event or taskbar template support. 

In queryTaskbarInfo event, we can append a div element as a child to the taskbar element. The left and width of this particular div element can be calculated by defining holiday start date and holiday end date in the data source. Please find the below code example. 

 

 

[app.component.html] 

<ejs-gantt # gantt 

    //... 

   (queryTaskbarInfo) = "queryTaskbarInfo($event)"> 

</ejs-gantt> 

[app.component.ts] 

public queryTaskbarInfo(args: any): void { 

    var startDate = args.data.taskData.HolidayStart; 

    var endDate = args.data.taskData.HolidayEnd; 

    if(!isNullOrUndefined(startDate) && !isNullOrUndefined(endDate)) { 

        var diff = endDate.getTime() - startDate.getTime(); 

        var width = (diff / (1000 * 60 * 60 * 24)) * this.ganttObj.perDayWidth; 

        var taskbar = args.taskbarElement.getElementsByClassName("e-gantt-child-taskbar"); 

        if (taskbar.length > 0) { 

            var left = this.ganttObj.dataOperation.getTaskLeft(args.data.StartDate, args.data.ganttProperties.isMilestone); 

            var holidayleft = this.ganttObj.dataOperation.getTaskLeft(startDate, args.data.ganttProperties.isMilestone) 

            var element = document.createElement("div"); 

            element.className = 'e-custom-taskbar'; 

            element.style.width = width + 'px'; 

            element.style.left = (holidayleft - left) + 'px'; 

            taskbar[0].appendChild(element); 

        } 

    } 

} 

 

Sample - https://stackblitz.com/edit/angular-whgrdk-85u6pi?file=app.component.html 

Note: In the provided sample, we have changed only the color of the part of taskbar. The dates are not validated based on the holidays assigned for the particular task. 

 

Please let us know, if you need further information on this. 

 

Regards, 

Pooja K. 

 

[Nikitha]

Hello,

Thank you for replying.

Sorry I took time to get back to you.

It worked !!

I modified it as holiday array in the taskdata to show more holidays on the taskbar.

Although I am facing problem when I set time along with the date.

As you can see I have set holiday[0].HfromDate to "9-12-2019 08:00" same as taskbar's startDateTime

{

"id": 902,

"code": "CIVI.767",

"name": "Topographic Survey",

"startDateTime": "09-12-2019 08:00",

"endDateTime": "12-12-2019 16:00",

"holiday":[

{

"HfromDate": "09-12-2019 08:00",

"HtoDate": "10-12-2019 00:00"

},

{

"HfromDate": "11-12-2019 00:00",

"HtoDate": "12-12-2019 00:00"

}

],

"isMilestone": 0,

"percentageComplete": "0",

"parentId": 140,

"predecessors": "",

"totalFloat": "0 hours",

"totalDuration": "32 hours",

"type": "activity",

"freeFloat": "0 hours",

"lag": "0.0"

}

But the div starts from date 9th 00:00hours but I want it to show on the date 9th 08:00hours.

In other words, the div should not come outside the taskbar.

Please look into this issue. Looking forward to your reply.

Thank you,

Nikitha R

[Karthikeyan Raja]

Hi Nikitha, 

 

In Gantt, default dayWorkingTime set to 08:00 to 17:00. So that div starts from 08:00 hours. We can change the dayWorkingTime property. Please find the code snippet below, 

[app.component.html] 

//… 

 

   <ejs-gantt id="ganttDefault" [dayWorkingTime] = "dayWorkingTime"></ ejs-gantt > 

 

//… 

 

[app.component.ts] 

//… 

 

export class AppComponent { 

   public dayWorkingTime: object; 

   public ngOnInit(): void {  

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

    } 

} 

 

//… 

 

We have prepared sample with your requirement. Please find the code snippet below, 

Sample – https://stackblitz.com/edit/angular-whgrdk-pdnq6x 

Please get back to us, If you need any further assistance on this. 

 

Regards, 

Karthikeyan Raja.