Example of Constraints in React Gantt Component

/
/
Constraints

This sample illustrates how to apply and visualize task constraints in a Gantt Chart. Task constraints define specific scheduling rules that determine when a task can start or finish, based on project requirements or dependencies.

More Details...

1
Planning and Permits
4/2/20258 daysAs Soon As Possible4/11/2025100
2
Site Evaluation
4/2/20252 daysStart No Earlier Than4/2/20254/3/2025100
3
Obtain Permits
4/7/20253 daysMust Start On4/7/20254/9/20252FS+2 days100
4
Finalize Planning
4/10/20252 daysFinish No Earlier Than4/11/20254/11/20253FS100
5
Site Preparation
4/14/202515 daysAs Soon As Possible5/2/2025100
6
Site Clearing
4/14/20250 daysAs Late As Possible4/14/2025100
7
Grading and Excavation
4/14/20253 daysAs Soon As Possible4/16/20256FS100
8
Foundation Work
4/18/20254 daysStart No Earlier Than4/18/20254/23/20257FS+1 day100
9
Foundation and Basement
4/24/20257 daysAs Soon As Possible5/2/2025100
10
Pour Foundation
4/24/20252 daysStart No Earlier Than4/24/20254/25/20258FS100
11
Cure Foundation
4/28/20252 daysMust Finish On4/29/20254/29/202510FS100
12
Basement Walls
4/30/20253 daysAs Soon As Possible5/2/202511FS100
13
Framing
5/1/202510 daysAs Soon As Possible5/14/2025100
14
Frame Floors
5/1/20252 daysStart No Earlier Than5/1/20255/2/2025100
15
Frame Walls
5/8/20252 daysMust Start On5/8/20255/9/202514FS+3 days100
16
Install Trusses
5/13/20252 daysFinish No Earlier Than5/14/20255/14/202515FS100
17
Roofing
5/15/20253 daysAs Late As Possible5/19/202516FS100
18
Mechanical, Electrical, Plumbing
5/14/20259 daysAs Soon As Possible5/26/202550
19
HVAC Installation
5/14/20253 daysStart No Earlier Than5/14/20255/16/2025100
20
Plumbing Installation
5/19/20253 daysFinish No Earlier Than5/21/20255/21/202519FS50
21
Electrical Installation
5/22/20253 daysFinish No Later Than5/26/20255/26/202520FS0
22
Interior Finishing
5/27/202519 daysAs Soon As Possible6/20/20250
23
Insulation and Drywall
5/27/20255 daysStart No Earlier Than5/27/20256/2/202521FS0
24
Interior Painting
6/3/20254 daysFinish No Earlier Than6/6/20256/6/202523FS0
25
Flooring Installation
6/9/20254 daysStart No Later Than6/12/20256/12/202524FS0
26
Cabinet and Fixture Setup
6/13/20253 daysAs Late As Possible6/17/202525FS0
27
Final Fixture Installation
6/18/20253 daysAs Soon As Possible6/20/202526FS0
28
Exterior Finishing
6/23/20254 daysMust Start On6/23/20256/26/20250
29
Landscaping
6/27/20255 daysStart No Earlier Than6/27/20257/3/202528FS0
30
Final Inspection
7/7/20253 daysMust Finish On7/9/20257/9/202529FS+1 day0
31
Correction of Issues
7/10/20253 daysAs Soon As Possible7/14/202530FS0
32
Final Walkthrough
7/15/20252 daysAs Late As Possible7/16/202531FS0
33
Handover Preparation
7/17/20253 daysStart No Earlier Than7/17/20257/21/202532FS0
34
Client Handover
7/23/20252 daysFinish No Earlier Than7/24/20257/24/202533FS0
35
Warranty Period Begins
7/25/20252 daysAs Soon As Possible7/28/202534FS0
36
Routine Maintenance Visits
7/29/202510 daysAs Late As Possible8/11/202535FS0
37
First Year Warranty Review
8/12/20255 daysStart No Earlier Than8/12/20258/18/202536FS0
38
Final Project Documentation
8/20/20253 daysFinish No Earlier Than8/22/20258/22/202537FS0
39
Celebrate Project Completion
8/25/20253 daysAs Soon As Possible8/27/202538FS0
40
Begin Next Project Planning
8/28/20254 daysAs Late As Possible9/2/202539FS0
Planning and Permits
As Soon As Possible
Site Evaluation
Start No Earlier Than
Obtain Permits
Must Start On
Finalize Planning
Finish No Earlier Than
Site Preparation
As Soon As Possible
Site Clearing
As Late As Possible
Grading and Excavation
As Soon As Possible
Foundation Work
Start No Earlier Than
Foundation and Basement
As Soon As Possible
Pour Foundation
Start No Earlier Than
Cure Foundation
Must Finish On
Basement Walls
As Soon As Possible
Framing
As Soon As Possible
Frame Floors
Start No Earlier Than
Frame Walls
Must Start On
Install Trusses
Finish No Earlier Than
Roofing
As Late As Possible
Mechanical, Electrical, Plumbing
As Soon As Possible
HVAC Installation
Start No Earlier Than
Plumbing Installation
Finish No Earlier Than
Electrical Installation
Finish No Later Than
Interior Finishing
As Soon As Possible
Insulation and Drywall
Start No Earlier Than
Interior Painting
Finish No Earlier Than
Flooring Installation
Start No Later Than
Cabinet and Fixture Setup
As Late As Possible
Final Fixture Installation
As Soon As Possible
Exterior Finishing
Must Start On
Landscaping
Start No Earlier Than
Final Inspection
Must Finish On
Correction of Issues
As Soon As Possible
Final Walkthrough
As Late As Possible
Handover Preparation
Start No Earlier Than
Client Handover
Finish No Earlier Than
Warranty Period Begins
As Soon As Possible
Routine Maintenance Visits
As Late As Possible
First Year Warranty Review
Start No Earlier Than
Final Project Documentation
Finish No Earlier Than
Celebrate Project Completion
As Soon As Possible
Begin Next Project Planning
As Late As Possible
Project StartDate
Project EndDate
Description

In Gantt Chart, task constraints define the rules that limit a task start or end date based on project scheduling needs. The following constraint types are supported:

  • As Soon As Possible - Task starts as early as possible. Default for auto-scheduled tasks.
  • As Late As Possible - Task finishes as late as possible without delaying dependent tasks.
  • Must Start On - Task must start on the specified date.
  • Must Finish On - Task must finish on the specified date.
  • Start No Earlier Than - Task cannot start before the specified date.
  • Start No Later Than - Task must start on or before the specified date.
  • Finish No Earlier Than - Task cannot finish before the specified date.
  • Finish No Later Than - Task must finish on or before the specified date.

You can assign constraints to a task using the taskFields.constraintType and taskFields.constraintDate properties. Constraints can also be updated interactively through the task edit dialog.

Handling constraint violation popup:

To control or suppress the constraint violation dialog, handle the actionBegin event with requestType as validateTaskViolation. Use args.validateMode to specify how to respond to constraint conflicts. Available properties include:

  • respectMustStartOn
  • respectMustFinishOn
  • respectStartNoLaterThan
  • respectFinishNoLaterThan

These options are false by default, which means the violation popup appears. To suppress the popup and cancel conflicting changes silently, set the relevant flag(s) to true.