Example of Resource Allocation in React Gantt Component


This sample demonstrates the options to allocate one or more resources to tasks based on the task requirement. The Work is the total labor hours necessary to complete a task. Work can be mapped from the data source field using the property work and when the work value is mapped from the data source, the end date and duration of the task will be calculated automatically based on the work and resource unit values from the data source. Work can be measured in hours, days and minutes. It is measured in ‘hours’ scale by default and this can be changed by using the workUnit property.

More Details...


In this example, you can see how to allocate single or multiple resources for the task. Based on the task complexity and the resource availability, you can plan and allocate the resources to task in the project. In this demo, there is a set of predefined resources and those IDs are assigned to the task. Resource information can be shown in Gantt chart by using the labelSettings property.

Resources can be mapped using resourceFields:.

id: To map resource ID

name: To map resource name

unit: To map resource unit

The work, duration and resource unit fields of a task depends upon each other values and will change automatically on editing any one of these fields. But we can also set these field’s values as constant using the taskType property. The following values can be set to the type property:

FixedDuration: Duration task field will remain constant while updating resource unit or work field.

FixedWork: Work field will remain constant while updating resource unit or duration fields.

FixedUnit: Resource units will remain constant while updating duration or work field.

Gantt component features are segregated into individual feature-wise modules. To use a selection, inject the Selection module.To use markers, inject the DayMarkers module. To edit resource unit, task type and duration, inject the Toolbar and Edit module.