Working Time Range

24 Sep 20184 minutes to read

In Gantt control, working hours in a day for a project can be defined by using dayWorkingTime property. Based on the working hours, automatic date scheduling and duration validations for a task are performed.

The below code snippet explains on how to define the working time range for the project in Gantt,

JAVASCRIPT

<ej-gantt id="GanttControl" [dayWorkingTime]="dayWorkingTime"
    //...>
</ej-gantt>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public dayWorkingTime: any;
    constructor() {
        //...
        this.dayWorkingTime = [{
                "from": "08:00 AM",
                "to": "12:00 PM"
            },
            {
                "from": "01:00 PM",
                "to": "05:00 PM"
            }
        ]
    }
}

NOTE

1. Individual tasks can lie between any time within the defined working time range of the project.

NOTE

1. dayWorkingTime property is used to define the working time for the whole project.

The below demo explains the working time range in Gantt

Working Time Range

The following screen shot shows working time range in Gantt control.

Highlight working time range

Highlight the working time range with a background color by using the dayWorkingTime.background property. You can highlight the non-working time ranges in a day. To do this, set the highlightNonWorkingTime property to true. To customize the non-working time background, use the nonWorkingBackground property.

The following code snippet explains how to define the working time range with background in Gantt.

JAVASCRIPT

<ej-gantt id="GanttControl" 
          [dayWorkingTime]="dayWorkingTime"
          [highlightNonWorkingTime]="true"
          nonWorkingBackground="#B7C3D0" >
</ej-gantt>

JAVASCRIPT

import {
    Component
} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public dayWorkingTime: any;
    constructor() {
        //...
        this.dayWorkingTime = [{
                "from": "08:00 AM",
                "to": "12:00 PM",
                background: "#EBF5FB"
            },
            {
                "from": "01:00 PM",
                "to": "05:00 PM",
                background: "#EBF5FB"
            }
        ]
    }
}

NOTE

The background colors of working time range are highlighted only when the scheduleHeaderSettings.scheduleHeaderType value as ej.Gantt.ScheduleHeaderType.Day.

The following screenshot shows the working time range with background colors.