When I Dragged a Task then the Time Changing to Midnight

Question

Hello, I hope you have great timesI use Gantt Component in my application and I want to change task's date by dragging a task. But when I dragged a task then the time changing to midnight. I want to save my hours. for example I have a task start at 08/08/2024 08:00 AM. I want to set the start date as 10/08/2024 08:00 AM by dragging the task. When I drag this, my task date set to 10/08/2024 00:00. I mean

it's getting to midnight. I dont want that. the start date is 08:00 AM before I drag it, now its changed to midnight which I dont want.Thank you.

Emrah Asma · Answer

Hi,I investigated something new it changes to gantt dayWorkingTime. In my example my dayWorkingTime is 00:00 - 24:00 so it changes to midnight but here dayWorkingTime is 08:00 - 17:00 so when I drag a task which starts 09:00 AM, the gantt changes to midnight. I dont want it. I hope it would be helpfull.Thanks.

Ajithkumar Gopalakrishnan · Answer

Hi Fatma,

Greetings from Syncfusion
Support,

Regarding your query, we rendered the Gantt chart using the dataSource
based on the shared image. The reported issue could not be replicated on our
end, and everything is functioning as expected. We have attached a video
reference for your review.

Video ref: https://www.syncfusion.com/downloads/support/directtrac/general/ze/timeline-902750575.zip

Sample link: https://stackblitz.com/edit/react-e3wmjy-bbzjz4?file=index.jsWe request you to share more
information to achieve your requirement. Kindly share the details below.
 Code
     snippet of the Gantt chart with the patch version.
 A
     video demo to replicate the issue, including replication steps.
 Whether
     you are using the timeZone property.
 How
     you are using the startDate and endDate column values (e.g., as
     timezoneobject or Dateobject).

Once we receive this information, we will be better equipped to identify the
root cause of the issue and provide you with the necessary assistance.

Regards,Ajithkumar G

Emrah Asma · Answer

Hello,I record a video to show issue steps: https://youtu.be/jB2vxMqCyoASame issue I countered the  sample link you send.Thank you.

Ajithkumar Gopalakrishnan · Answer

Hi Emrah,

Thank you for the video explanation. We need to clarify the
behavior of the Gantt chart. When dragging and dropping a taskbar, the position
is rounded off based on the dayWorkingTime and bottom tier unit values.
During the initial render, the date and time are validated and rendered
accurately. However, if the bottom tier unit is set to 'Day', when
dragging and dropping, the taskbar's start and end dates are adjusted based on
the bottom tier unit, with time rounded off and updated according to the time
defined as start of the day in dayWorkingTime. Additionally, when the taskbar
drag starts, the taskbar tooltip displays the corresponding date and time of a
task that will represent after mouse drop(that will be based on start time
defined in dayWorkingTime). This is the expected behavior of the Gantt chart.
To ensure the taskbar is dropped at an exact time, we suggest setting the
bottom tier to 'Hour' in the timelineSettings, so the taskbar
position will reflect the precise hour value after rounding off, and then the
taskbar will be rendered accordingly. We have attached a code snippet and
sample for your reference.

const timelineSettings
  = {
     
  topTier: {
         
  unit: 'Week',
     
  },
     
  bottomTier: {
         
  unit: 'Hour',
     
  },
     
  timelineUnitSize: 50
  };

You can find a working example on StackBlitz.

For more information, you may refer to the following
link:

https://ej2.syncfusion.com/react/documentation/gantt/time-line/time-line#hour-timeline-mode

If you have any further questions or need additional
assistance, please let me know!Regards,
Ajithkumar G