Example of Event Markers in Blazor Gantt Chart Component
This sample visualizes how to notify the important dates in the project timeline.
Task Id | Task Name | Start Date | End Date | Duration | Dependency | Progress |
|---|
| 1 | Product concept | 4/2/2021 | 4/8/2021 | 5 days | 33 | |
| 2 | Defining the product usage | 4/2/2021 | 4/6/2021 | 3 days | 30 | |
| 3 | Defining the target audience | 4/2/2021 | 4/6/2021 | 3 days | 40 | |
| 4 | Prepare product sketch and notes | 4/7/2021 | 4/8/2021 | 2 days | 2FS | 30 |
| 5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days | 3FS,4FS | 0 |
| 6 | Market research | 4/9/2021 | 4/20/2021 | 8 days | 25 | |
| 7 | Demand analysis | 4/9/2021 | 4/14/2021 | 4 days | 15 | |
| 8 | Customer strength | 4/9/2021 | 4/14/2021 | 4 days | 5FS | 30 |
| 9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days | 5FS | 0 |
| 10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days | 7FS,8FS | 30 |
| 11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days | 9FS | 40 |
| 12 | Research completed | 4/20/2021 | 4/20/2021 | 0 days | 10FS | 30 |
| 13 | Product design and development | 4/21/2021 | 5/10/2021 | 14 days | 30 | |
| 14 | Functionality design | 4/21/2021 | 4/23/2021 | 3 days | 12FS | 30 |
| 15 | Quality design | 4/21/2021 | 4/23/2021 | 3 days | 12FS | 40 |
| 16 | Define reliability | 4/26/2021 | 4/27/2021 | 2 days | 15FS | 30 |
| 17 | Identifying raw materials | 4/26/2021 | 4/27/2021 | 2 days | 15FS | 0 |
| 18 | Define cost plan | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 35 |
| 19 | Define manufacturing cost | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 40 |
| 20 | Define selling cost | 4/28/2021 | 4/29/2021 | 2 days | 17FS | 30 |
| 21 | Development of final design | 4/30/2021 | 5/10/2021 | 7 days | 32 | |
| 22 | Develop dimensions and design | 4/30/2021 | 5/3/2021 | 2 days | 19FS,20FS | 30 |
| 23 | Develop designs to meet industry standard | 5/4/2021 | 5/5/2021 | 2 days | 22FS | 40 |
| 24 | Include all the details | 5/6/2021 | 5/10/2021 | 3 days | 23FS | 30 |
| 25 | CAD - Computer Aided Design | 5/11/2021 | 5/13/2021 | 3 days | 24FS | 0 |
| 26 | CAM - Computer Aided Manufacturing | 5/14/2021 | 5/18/2021 | 3 days | 25FS | 30 |
| 27 | Finalize the design | 5/18/2021 | 5/18/2021 | 0 days | 26FS | 40 |
| 28 | Prototype testing | 5/19/2021 | 5/24/2021 | 4 days | 27FS | 30 |
| 29 | Include feedback | 5/19/2021 | 5/24/2021 | 4 days | 28SS | 0 |
| 30 | Manufacturing | 5/25/2021 | 5/31/2021 | 5 days | 28FS,29FS | 30 |
| 31 | Assembling material into finished goods | 6/1/2021 | 6/7/2021 | 5 days | 30FS | 40 |
| 32 | Final product development | 6/8/2021 | 6/15/2021 | 6 days | 15 | |
| 33 | Important improvement | 6/8/2021 | 6/10/2021 | 3 days | 31FS | 0 |
| 34 | Customer testing and feedback | 6/11/2021 | 6/15/2021 | 3 days | 33FS | 30 |
| 35 | Final product development | 6/16/2021 | 6/21/2021 | 4 days | 30 | |
| 36 | Important improvement | 6/16/2021 | 6/21/2021 | 4 days | 34FS | 30 |
| 37 | Address any unforeseen issues | 6/16/2021 | 6/21/2021 | 4 days | 36SS | 30 |
| 38 | Finalize the product | 6/22/2021 | 7/1/2021 | 8 days | 15 | |
| 39 | Branding the product | 6/22/2021 | 6/25/2021 | 4 days | 37FS | 30 |
| 40 | Marketing and Presales | 6/28/2021 | 7/1/2021 | 4 days | 39FS | 0 |
Mar 27, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 |
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 | S | S | M |
Research phase
Design phase
Production phase
Sales and marketing phase
In this example, the EventMarkers are used as a bookmark to show the different stages of the project life cycle. You can show the desired text on a date.
An Event Marker has the following properties to customize the marker:
- CssClass - Used to assign external CSS styles to that particular marker.
- Day - Used to set the date of the event marker.
- Label - Used to set the desired text to be shown on the vertical line.
More information about event markers can be found in this documentation section.