Issue with Gantt Chart Task Dependencies and Shift-Based Scheduling in React

[Emrah Asma]

Hello,

I'm currently working with the React Gantt component and have encountered a critical issue regarding task dependencies and shift-based scheduling.

Problem 1: Dependency Not Respected on Drag

We are using task dependencies such as Finish-to-Start (FS), where one task should start only after the preceding task is completed. However, when I drag the first task to a later time:

• The dependent (second) task does not automatically move, and remains at its original position.

• This behavior violates the FS dependency logic, since the second task starts before the first one ends.

We expect the Gantt chart to automatically adjust dependent tasks when their predecessors are moved via drag and drop, keeping the defined dependency logic intact.

Problem 2: Shift-Aware Scheduling

In our application, tasks must be scheduled within custom shift hours (e.g., a night shift from 22:00 to 06:00). We need the Gantt component to:

• Respect custom working hours defined by us,

• Schedule tasks only within active shift time ranges,

• Ensure dependencies are calculated accordingly.

Problem 3: Multiple dayWorkingTime Intervals

We also want to define multiple dayWorkingTime intervals per day. For example, a typical schedule may include:

• Day Shift: 08:00 – 16:00

• Evening Shift: 16:00 – 00:00

• Night Shift: 00:00 – 06:00

Our expectation is that:

• The Gantt chart uses all defined working intervals when calculating task durations and rendering,

• Manual drag-and-drop and automatic dependency adjustments fully respect these multiple shift periods.

However, it seems like the component currently supports only one continuous time interval per day or does not fully support our custom shift structure during scheduling and dependency calculation.

Additional Context:

• We are already using predecessorMapping for dependencies.

• We’ve implemented custom logic for duration calculation respecting shift hours, but Syncfusion’s internal operations (drag, dependency shift) do not align with this.

• Timezone handling is already complex in our app, so Gantt’s internal scheduling must remain predictable based on our shift constraints.

---

Could you please guide us on the following:

1. How to ensure dependency rules (like FS) are respected during manual drag operations?

2. How to enforce task scheduling within multiple custom working hour ranges per day?

3. Is it possible to extend dayWorkingTime or override internal calculations to make the component fully shift-aware?

Thank you

[Sridharan Jayabalan]

Hi Emrah,

 

Greetings from Syncfusion. 

 

Query 1 - How to ensure dependency rules (like FS) are respected during manual drag operations?

 

When dragging the taskbar of the first task (which is connected to the second task with a "1FS" dependency), the second task automatically moves accordingly. We are unable to replicate the scenario you have shared.

 

We suspect that you may have set the enablePredecessorValidation or autoCalculateDateScheduling property to false in your application. Please verify the behavior with these properties enabled. Refer to the attached video for your reference.

 

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/FS_Dependency

 

 

Query 2 - How to enforce task scheduling within multiple custom working hour ranges per day?

 

We suggest using the weekWorkingTime property to set multiple working time intervals for specific days. Within this property, specify the day and your desired time intervals. Refer to the code snippet and sample below:

 

const Editing = () => {

 

 // use dayWorkingTime to set working time for all days

  const dayWorkingTime = [

    { from: 0, to: 6 }, // Night Shift

    { from: 8, to: 16 }, // Day Shift

    { from: 16, to: 24 }, // Evening Shift

  ];

 

// use weekWorkingTime to set working time for specific day

  const weekWorkingTime = [

    {

      dayOfWeek: 'Monday',

      timeRange: [

        { from: 0, to: 6 }, // Night Shift

        { from: 8, to: 16 }, // Day Shift

        { from: 16, to: 24 },

      ],

    },

    { dayOfWeek: 'Tuesday', timeRange: [{ from: 10, to: 18 }] },

  ];

  return (

    <div className="control-pane">

      <div className="control-section">

        <GanttComponent

          weekWorkingTime={weekWorkingTime}

          //   dayWorkingTime={dayWorkingTime}

        >

          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />

        </GanttComponent>

      </div>

    </div>

  );

};

Sample - 8qparpzz (duplicated) - StackBlitz

 

Query 3 - Is it possible to extend dayWorkingTime or override internal calculations to make the component fully shift-aware?

You can set dayWorkingTime from 0 to 24 with multiple intervals. If you define dayWorkingTime using shift-based intervals such as morning, evening, or night shifts with specific time ranges, then the duration, dependencies, and other calculations will be validated based on those defined working hours.

 

Now, to assist you better, could you please clarify the following:

 

• Which calculations do you want to override? For example, duration calculation, dependency date adjustment, task start/end dates, etc.
• When do you want the override to take place? For example, during taskbar edit, dependency update, or initial rendering.
• What do you mean by extending dayWorkingTime?

 

If we misunderstood your query, share us detailed information of your requirement with video.

 

 

Regards,

Sridharan

[Emrah Asma]

Hello,

Each task in our system is assigned to a specific shift. For example:

• DS (Day Shift): 08:00 – 16:00

• NS (Night Shift): 00:00 – 06:00

• ES (Evening Shift): 16:00 – 24:00

This shift information is available in our task data under a field like shiftCode.

We would like the Gantt chart to automatically use different working hours for each task depending on its shiftCode.

---

⚠️ Current Limitation:

We noticed that:

• dayWorkingTime and weekWorkingTime are global configurations, applied to all tasks.

• There is no built-in way to set per-task working hours based on a field like shiftCode.

• As a result, we are forced to manually calculate and adjust each task’s startDate and duration depending on the shift. This defeats the purpose of having built-in scheduling logic.

---

🙏 Feature Request:

Would it be possible to support shift-based working time per task?

Here are a few suggestions on how this could be implemented:

1. Support a new field in taskFields, such as workingTimeKey or shiftCode.

2. Allow developers to define a working time map:

ts
CopyEdit
const shiftWorkingHours = {
  ds: { from: 8, to: 16 },
  ns: { from: 0, to: 6 },
  es: { from: 16, to: 24 }
};

3. The Gantt component could then automatically apply the correct working time based on the shiftCode of each task.

---

📌 Use Case Summary:

We are building a scheduling tool where orders and operations are assigned to shifts. A global working time configuration doesn't meet this need — per-task working hours are essential for accurate planning and visualization.

---

Could you please let us know:

• Whether this feature is already supported (or partially supported) in some way?

• If not, is it on the roadmap or can it be considered as a feature request?

Thank you very much for your support

[Sridharan Jayabalan]

Emrah,

 

Thank you for reaching out to us and sharing your detailed use case and suggestions.

 

Query 1 - Whether this feature is already supported (or partially supported) in some way?

 

We understand the importance of supporting per-task working hours, especially in shift-based scheduling scenarios like yours (DS, NS, ES). Currently, the Syncfusion Gantt Chart supports only global configurations for working time through the dayWorkingTime and weekWorkingTime properties. Unfortunately, it does not support defining working hours individually for each task based on a field like shiftCode.

 

Therefore, we have already logged this requirement as a feature request, recognizing its potential value for users in similar scheduling environments.

 

 

Query 2 - If not, is it on the roadmap or can it be considered as a feature request?

 

The timeline for this feature remains uncertain as it depends on various factors, including customer demand, votes, and the frequency of inquiries for this particular feature. As of now, we are unable to provide a specific month or year for its implementation due to these varying factors influencing our development priorities and schedules.

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link, 

  

Feedback link - Provide support to work time for specific date / particular date in React | Feedback Portal

 

 

Regards,

Sridharan

[Emrah Asma]

Hello,

We reviewed the feedback item titled “Provide support to work time for specific date / particular date”, but our use case is actually different.

---

What We Need (Detailed Use Case):

In our scheduling system, each task is assigned to a specific shift. For example:

• DS (Day Shift): 08:00 – 16:00

• NS (Night Shift): 00:00 – 06:00

• ES (Evening Shift): 16:00 – 24:00

Each task object contains a field like:

{
  id: 1,
  name: "Task A",
  shiftCode: "ds", 
  startDate: "2025-06-13",
  duration: 2
}

What we need is for the Gantt chart to automatically use the correct working time for each task based on its shiftCode.

---

🔎 Key Distinction from Existing Feature Request:

• The existing feature request (feedback/58450) focuses on defining working hours for specific calendar dates.

• Our need is different: we want to define working hours per task, using a shift code that is part of the task data.

• That means two tasks starting on the same day could have completely different working hours — depending on the shift they belong to.

---

Suggested API Enhancement:

A possible API design could include:

1. A taskFields.shiftCode property:

taskFields: {
  id: 'id',
  name: 'name',
  startDate: 'startDate',
  duration: 'duration',
  shiftCode: 'shiftCode'
}

2. A working hours map:

const shiftWorkingHours = {
  ds: [{ from: 8, to: 16 }],
  ns: [{ from: 0, to: 6 }],
  es: [{ from: 16, to: 24 }]
};

The Gantt chart would then apply the appropriate working time for each task based on the shiftCode.

Additional Requirement: Support for Dynamic Shift Codes

In addition to DS/NS/ES, our users need the ability to define custom shift codes dynamically — such as flex1, weekendShift, or customNight.

This means the shiftWorkingHours object should not be limited to hardcoded keys like ds, ns, and es. It should allow any arbitrary string as a key representing a shift code, for example:

const shiftWorkingHours = {
  ds: [{ from: 8, to: 16 }],
  ns: [{ from: 0, to: 6 }],
  es: [{ from: 16, to: 24 }],
  flex1: [{ from: 10, to: 18 }],
  weekendShift: [{ from: 9, to: 15 }]
};

This flexibility is important in real-world scenarios where shift types vary based on department, client, or location. The Gantt chart should fully support this by referencing the shiftCode field in the task data and applying the corresponding working hours dynamically — regardless of how many shift codes exist or what they're named.

---

🧪 Why This Is Important:

This feature is essential for industries like manufacturing, logistics, and healthcare — where different operations are performed in different shifts and task durations should be calculated accordingly.

Currently, we're forced to manually calculate start and end dates based on shift hours, which makes Gantt's built-in scheduling capabilities unusable in our case.

---

🙏 Feature Request:

Please consider this as a separate feature request from calendar-date-based working time. We are requesting the ability to assign working time per task based on a shift code, not based on the date alone. 

Could you also create a separate feedback link for this specific request? We'd like to be able to track its progress independently from the date-based working time feature.

Thanks.

[Sridharan Jayabalan]

Emrah,

 

Sorry for the confusion on previous update.

 

After reviewing your query, currently we do not have support to set custom calendar for each record or task in Gantt functionality.

 

We have logged feature request for the requirement. You can track the status of the feature from the feedback link given below.

 

Feedback link - Provide support for custom calendar for each record or task in React | Feedback Portal

 

We have already lined up some major features, we could not implement this support immediately. We will implement this and include it in any of our upcoming releases. Please cast your vote on this feature. Based on the customer demand we will prioritize the features in our upcoming road map. You can communicate with us or track the status of the feature using the feedback link.

 

 

Regards,

Sridharan