This sample demonstrates how to adjust the working days within a week and manage the visibility of non-working days in the timeline, enabling customized project scheduling.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|---|
| 1 | Product concept | 4/2/2024 | 4/8/2024 | 5 days | 18 | |
| 2 | Defining the product and its usage | 4/2/2024 | 4/4/2024 | 3 days | 30 | |
| 3 | Defining target audience | 4/2/2024 | 4/4/2024 | 3 days | 0 | |
| 4 | Prepare product sketch and notes | 4/5/2024 | 4/8/2024 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/8/2024 | 4/8/2024 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/9/2024 | 4/18/2024 | 8 days | 15 | |
| 7 | Demand analysis | 4/9/2024 | 4/12/2024 | 4 days | 15 | |
| 8 | Customer strength | 4/9/2024 | 4/12/2024 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/9/2024 | 4/12/2024 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/15/2024 | 4/18/2024 | 4 days | 30 | 7FS |
| 11 | Product strength analsysis | 4/15/2024 | 4/18/2024 | 4 days | 0 | 9FS |
| 12 | Research complete | 4/18/2024 | 4/18/2024 | 0 days | 0 | 10FS |
| 13 | Product design and development | 4/19/2024 | 5/16/2024 | 20 days | 13 | |
| 14 | Functionality design | 4/19/2024 | 4/23/2024 | 3 days | 30 | 12FS |
| 15 | Quality design | 4/19/2024 | 4/23/2024 | 3 days | 0 | 12FS |
| 16 | Define reliability | 4/24/2024 | 4/25/2024 | 2 days | 30 | 15FS |
| 17 | Identifying raw materials | 4/24/2024 | 4/25/2024 | 2 days | 0 | 15FS |
| 18 | Define cost plan | 4/26/2024 | 4/29/2024 | 2 days | 15 | |
| 19 | Manufacturing cost | 4/26/2024 | 4/29/2024 | 2 days | 30 | 17FS |
| 20 | Selling cost | 4/26/2024 | 4/29/2024 | 2 days | 0 | 17FS |
| 21 | Development of the final design | 4/30/2024 | 5/8/2024 | 7 days | 8 | |
| 22 | Defining dimensions and package volume | 4/30/2024 | 5/1/2024 | 2 days | 30 | 19FS,20FS |
| 23 | Develop design to meet industry standards | 5/2/2024 | 5/3/2024 | 2 days | 0 | 22FS |
| 24 | Include all the details | 5/6/2024 | 5/8/2024 | 3 days | 0 | 23FS |
| 25 | CAD computer-aided design | 5/9/2024 | 5/13/2024 | 3 days | 30 | 24FS |
| 26 | CAM computer-aided manufacturing | 5/14/2024 | 5/16/2024 | 3 days | 0 | 25FS |
| 27 | Design complete | 5/16/2024 | 5/16/2024 | 0 days | 0 | 26FS |
| 28 | Prototype testing | 5/17/2024 | 5/22/2024 | 4 days | 30 | 27FS |
| 29 | Include feedback | 5/17/2024 | 5/22/2024 | 4 days | 0 | 28SS |
| 30 | Manufacturing | 5/23/2024 | 5/29/2024 | 5 days | 30 | 28FS,29FS |
| 31 | Assembling materials to finsihed goods | 5/30/2024 | 6/5/2024 | 5 days | 0 | 30FS |
| 32 | Feedback and testing | 6/6/2024 | 6/13/2024 | 6 days | 47 | |
| 33 | Internal testing and feedback | 6/6/2024 | 6/10/2024 | 3 days | 45 | 31FS |
| 34 | Customer testing and feedback | 6/11/2024 | 6/13/2024 | 3 days | 50 | 33FS |
| 35 | Final product development | 6/14/2024 | 6/19/2024 | 4 days | 30 | |
| 36 | Important improvements | 6/14/2024 | 6/19/2024 | 4 days | 30 | 34FS |
| 37 | Address any unforeseen issues | 6/14/2024 | 6/19/2024 | 4 days | 30 | 36SS |
| 38 | Final product | 6/20/2024 | 7/1/2024 | 8 days | 15 | |
| 39 | Branding product | 6/20/2024 | 6/25/2024 | 4 days | 0 | 37FS |
| 40 | Marketing and presales | 6/26/2024 | 7/1/2024 | 4 days | 30 | 39FS |
Mar 24, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 |
|---|
S | M | T | 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 | M | T | 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 | M | T | 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 | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F |
|---|
Working Days | |
Show Weekends | |
Highlight Weekends |
In this example, you can customize which days of the week are considered working days using the workWeek property. Simply select your preferred working days from the dropdown list in the property panel, and they will be applied to the Gantt chart. Weekends can be highlighted using the highlightweekends property for easy identification.
Non-working days are visible by default in the Gantt chart timeline, their visibility can be customized using the timelineSettings.showWeekend property. Setting this to false will hide non-working days from the timeline.
Gantt component features are segregated into individual feature-wise modules. To use a selection and markers, inject the SelectionService and DayMarkersService into the @NgModule.providers section respectively.