This sample visualizes the support for changing the working hours in a day. The selected start and end hours from the property panel will be applied to each task available in the project.
Name | Start Date | End Date | Duration | Dependency | Progress |
|---|---|---|---|---|---|
Product concept | 4/2/2025 | 4/2/2025 | 5 hours | 18 | |
Defining the product and its usage | 4/2/2025 | 4/2/2025 | 3 hours | 30 | |
Defining target audience | 4/2/2025 | 4/2/2025 | 3 hours | 0 | |
Prepare product sketch and notes | 4/2/2025 | 4/2/2025 | 2 hours | 2FS | 30 |
Concept approval | 4/2/2025 | 4/2/2025 | 0 hours | 3FS,4FS | 0 |
Market research | 4/2/2025 | 4/3/2025 | 8 hours | 15 | |
Demand analysis | 4/2/2025 | 4/3/2025 | 4 hours | 15 | |
Customer strength | 4/2/2025 | 4/3/2025 | 4 hours | 5FS | 30 |
Market opportunity analysis | 4/2/2025 | 4/3/2025 | 4 hours | 5FS | 0 |
Competitor analysis | 4/3/2025 | 4/3/2025 | 4 hours | 7FS | 30 |
Product strength analsysis | 4/3/2025 | 4/3/2025 | 4 hours | 9FS | 0 |
Research complete | 4/3/2025 | 4/3/2025 | 0 hours | 10FS | 0 |
Product design and development | 4/3/2025 | 4/8/2025 | 20 hours | 13 | |
Functionality design | 4/3/2025 | 4/3/2025 | 3 hours | 12FS | 30 |
Quality design | 4/3/2025 | 4/3/2025 | 3 hours | 12FS | 0 |
Define reliability | 4/4/2025 | 4/4/2025 | 2 hours | 15FS | 30 |
Identifying raw materials | 4/4/2025 | 4/4/2025 | 2 hours | 15FS | 0 |
Define cost plan | 4/4/2025 | 4/4/2025 | 2 hours | 15 | |
Manufacturing cost | 4/4/2025 | 4/4/2025 | 2 hours | 17FS | 30 |
Selling cost | 4/4/2025 | 4/4/2025 | 2 hours | 17FS | 0 |
Development of the final design | 4/4/2025 | 4/7/2025 | 7 hours | 8 | |
Defining dimensions and package volume | 4/4/2025 | 4/4/2025 | 2 hours | 19FS,20FS | 30 |
Develop design to meet industry standards | 4/4/2025 | 4/4/2025 | 2 hours | 22FS | 0 |
Include all the details | 4/7/2025 | 4/7/2025 | 3 hours | 23FS | 0 |
CAD computer-aided design | 4/7/2025 | 4/7/2025 | 3 hours | 24FS | 30 |
CAM computer-aided manufacturing | 4/7/2025 | 4/8/2025 | 3 hours | 25FS | 0 |
Design complete | 4/8/2025 | 4/8/2025 | 0 hours | 26FS | 0 |
Prototype testing | 4/8/2025 | 4/8/2025 | 4 hours | 27FS | 30 |
Include feedback | 4/8/2025 | 4/8/2025 | 4 hours | 28SS | 0 |
Manufacturing | 4/8/2025 | 4/9/2025 | 5 hours | 28FS,29FS | 30 |
Assembling materials to finsihed goods | 4/9/2025 | 4/9/2025 | 5 hours | 30FS | 0 |
Feedback and testing | 4/9/2025 | 4/10/2025 | 6 hours | 47 | |
Internal testing and feedback | 4/9/2025 | 4/10/2025 | 3 hours | 31FS | 45 |
Customer testing and feedback | 4/10/2025 | 4/10/2025 | 3 hours | 33FS | 50 |
Final product development | 4/10/2025 | 4/11/2025 | 4 hours | 30 | |
Important improvements | 4/10/2025 | 4/11/2025 | 4 hours | 34FS | 30 |
Address any unforeseen issues | 4/10/2025 | 4/11/2025 | 4 hours | 36SS | 30 |
Final product | 4/11/2025 | 4/14/2025 | 8 hours | 15 | |
Branding product | 4/11/2025 | 4/11/2025 | 4 hours | 37FS | 0 |
Marketing and presales | 4/11/2025 | 4/14/2025 | 4 hours | 39FS | 30 |
W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S |
|---|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
|---|
Work Start Time | |
Work End Time | |
Working Days | |
Work Start Time | |
Work End Time | |
In this example, you can see how to render a Gantt Chart with the provided data source and customizable working hours in a day. You can split the working hours in a day to one or more range. So, you can also provide the dayworkingtime property value as array of object collection. Gantt Chart also supports different durationUnit values as follows:
dayhourminuteYou can also set different working time range for different working days using weekWorkingTime property. The weekWorkingTime property enables you to specify different working hours for each day of the week in your Gantt Chart. By configuring this property, you can ensure that tasks are only scheduled during defined working periods, avoiding non-working hours.
Given duration in dataSource will be considered with this unit. In this demo, the hour unit is used to render taskbars in day hour timeline mode. Gantt Chart supports only 24hours format as of now. The working hours will differ between organizations. This feature will be helpful to keep track of each task and resource task status based on the working time of company.
Gantt component features are segregated into individual feature-wise modules. To use a selection support and event markers we need to inject the
Selection, DayMarkers modules.
More information on the Essential® React Gantt Chart can be found in this documentation section.