Example of Working Time Range in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Working Time Range

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.

More Details...

Product concept
4/2/20244/2/20245 hours18
Defining the product and its usage
4/2/20244/2/20243 hours30
Defining target audience
4/2/20244/2/20243 hours0
Prepare product sketch and notes
4/2/20244/2/20242 hours2FS30
Concept approval
4/2/20244/2/20240 hours3FS,4FS0
Market research
4/2/20244/3/20248 hours15
Demand analysis
4/2/20244/3/20244 hours15
Customer strength
4/2/20244/3/20244 hours5FS30
Market opportunity analysis
4/2/20244/3/20244 hours5FS0
Competitor analysis
4/3/20244/3/20244 hours7FS30
Product strength analsysis
4/3/20244/3/20244 hours9FS0
Research complete
4/3/20244/3/20240 hours10FS0
Product design and development
4/3/20244/8/202420 hours13
Functionality design
4/3/20244/3/20243 hours12FS30
Quality design
4/3/20244/3/20243 hours12FS0
Define reliability
4/4/20244/4/20242 hours15FS30
Identifying raw materials
4/4/20244/4/20242 hours15FS0
Define cost plan
4/4/20244/4/20242 hours15
Manufacturing cost
4/4/20244/4/20242 hours17FS30
Selling cost
4/4/20244/4/20242 hours17FS0
Development of the final design
4/4/20244/5/20247 hours8
Defining dimensions and package volume
4/4/20244/4/20242 hours19FS,20FS30
Develop design to meet industry standards
4/4/20244/4/20242 hours22FS0
Include all the details
4/5/20244/5/20243 hours23FS0
CAD computer-aided design
4/5/20244/5/20243 hours24FS30
CAM computer-aided manufacturing
4/5/20244/8/20243 hours25FS0
Design complete
4/8/20244/8/20240 hours26FS0
Prototype testing
4/8/20244/8/20244 hours27FS30
Include feedback
4/8/20244/8/20244 hours28SS0
Manufacturing
4/8/20244/9/20245 hours28FS,29FS30
Assembling materials to finsihed goods
4/9/20244/9/20245 hours30FS0
Feedback and testing
4/9/20244/10/20246 hours47
Internal testing and feedback
4/9/20244/10/20243 hours31FS45
Customer testing and feedback
4/10/20244/10/20243 hours33FS50
Final product development
4/10/20244/11/20244 hours30
Important improvements
4/10/20244/11/20244 hours34FS30
Address any unforeseen issues
4/10/20244/11/20244 hours36SS30
Final product
4/11/20244/12/20248 hours15
Branding product
4/11/20244/11/20244 hours37FS0
Marketing and presales
4/11/20244/12/20244 hours39FS30
Product concept
Defining the product and its usage
Defining target audience
Prepare product sketch and notes
Concept approval
Market research
Demand analysis
Customer strength
Market opportunity analysis
Competitor analysis
Product strength analsysis
Research complete
Product design and development
Functionality design
Quality design
Define reliability
Identifying raw materials
Define cost plan
Manufacturing cost
Selling cost
Development of the final design
Defining dimensions and package volume
Develop design to meet industry standards
Include all the details
CAD computer-aided design
CAM computer-aided manufacturing
Design complete
Prototype testing
Include feedback
Manufacturing
Assembling materials to finsihed goods
Feedback and testing
Internal testing and feedback
Customer testing and feedback
Final product development
Important improvements
Address any unforeseen issues
Final product
Branding product
Marketing and presales
Work Start Time
Work End Time
Working Days
Work Start Time
Work End Time
Description

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: day hour minute You 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. Injecting Module: Gantt control features are segregated into individual feature-wise modules. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method. To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method.