[REACT] End date with custom calendar

[tiagolima]

Hello dears,

I am using the gantt-2.1.9 component and I would like to know how to configure it so that the "finish" or "end date" column has the same behavior as Microsoft Project.

Microsoft Project's behavior:
A task that starts on day 1 with a duration of 1 day, ends on the same day
A task that starts on day 1 and lasts for 5 days, ends on day 5

Bryntum Gantt's behavior:
A task that starts on day 1 with a duration of 1 day, ends on the following day
A task that starts on day 1 and lasts for 5 days, ends on day 6

Attached a comparison of MS Project with the Bryntum Gantt demo at:
https://www.bryntum.com/examples/gantt/react/javascript/advanced/build/index.html

Thanks
Tiago Lima

[arcady]

MS Project by default uses 8 hrs/day calendar. So tasks start at 8am and finish and 5pm.
But the Gantt by default uses 24hrs/day calendar so tasks start at 00:00 and finish at 00:00.

That demo also includes 8hrs calendar you just need to switch the project to use it.
To achieve that you need to adjust the response this way:

  "project" : {
    "calendar"     : "business",
    "startDate"    : "2019-01-14",
    "hoursPerDay"  : 8,
    "daysPerWeek"  : 5,
    "daysPerMonth" : 20
  },

The demo uses react/javascript/advanced/build/data/launch-saas.json static file for data loading.
So you need to edit it as I've posted above.

In the above snippet I've changed project calendar to "business" (you can find that definition in the file as well).
and hoursPerDay to 8 (so day unit would mean 8 hours).

If you want to try it online w/o editing the file type this in console:

project = bryntum.query('gantt').project
project.hoursPerDay = 8
project.calendar = 'business'

[arcady]

For more details on calendars usage please see this guide

[tiagolima]

Perfect!
Thanks a lot for the help.