Issue with end date

Gantt
#1

Hi,

We are using DHTMLX Gantt with Angular and using inline editing. As per the design, working days are configurable and we are having an issue when Monday to Friday are working days and Saturday and Sunday are non working days.

The issue is, when we adjusting the duration, if the task ends on Monday, end date control displays it as Saturday (this is happening for all weeks). Refer below screenshot.

image
image884×637 58.3 KB

Could you please help us to resolve this issue.

Duration editor is configured as below.

export const DURATION_EDITOR = { type: ‘number’, map_to: ‘duration’, min: 0, max: 5000 };

Duration template is configured as below.

private adjustTaskDurationTemplate(task: GanttTaskInfo): string {

task.duration = Math.floor(task.duration);

return ‘

’ + task.duration + ‘
;’;

}

End date editor is configured as below.

export const END_DATE_EDITOR = { type: ‘date’, map_to: ‘end_date’ };

End date template is configured as below.

private displayEndDateTemplate(task: GanttTaskInfo): string {

return ‘

’ + this.projectTaskInfoService.formatDate(task.end_date) + ‘
’;

}

Working days are configured as below.

gantt.config.xml_date = “%d-%m-%Y”;

antt.config.work_time = true;

gantt.setWorkTime({ hours: [“8:00-16:00”] });

gantt.config.duration_unit = “day”;

gantt.setWorkTime({ day: 1, hours: true });

gantt.setWorkTime({ day: 2, hours: true });

gantt.setWorkTime({ day: 3, hours: true });

gantt.setWorkTime({ day: 4, hours: true });

gantt.setWorkTime({ day: 5, hours: true });

gantt.setWorkTime({ day: 6, hours: false });

gantt.setWorkTime({ day: 0, hours: false });

Thank you.

#2

Hello Madhuka,
If the task ends on Monday and you use the work time feature, Gantt should show the same end_date value in the inline editor:

766×539 33.3 KB

https://snippet.dhtmlx.com/6uxmvou1

Probably, the issue is related to the Gantt configuration, but it is hard to suggest what might be wrong as I don’t see your code.
Please add your configuration to the following snippet and make sure that the issue is reproduced there:

Then, click on the Save button and send me the link.
Or send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.

#3

Hi Ramil,

Thank you for the respone.

I was able to reproduce the issue in below snippet.

https://snippet.dhtmlx.com/18ccnr3i

You can see in below highlighted tasks, end date should be Monday if you consider the duration, but it shows as Saturday. (However the chart area seems like correct, but end date inline editor shows incorrect date)

image
image1920×1090 180 KB

Could you please advise.

Thank you.

Kind regards,
Madhuka Lakshan.

#4

Hello Madhuka,
I checked the snippet, and everything seems to be working correctly there.
But I suppose you expect the inclusive end_date/duration feature. For the end_date, 2022-04-06 means 2022-04-06 00:00. It is the time when the date starts, not when it ends.

Gantt uses the non-inclusive duration. There is no way to change how Gantt works, but you can change what is displayed to the users by using the templates:
https://docs.dhtmlx.com/gantt/desktop__loading.html#taskenddatedisplayampinclusiveenddates
https://docs.dhtmlx.com/gantt/api__gantt_task_end_date_template.html
Here is an example of how it works:
http://snippet.dhtmlx.com/5/2fc90812a

Also, you can set the duration_unit to ‘hour’ and enable the work_time parameter:
https://docs.dhtmlx.com/gantt/api__gantt_duration_unit_config.html
https://docs.dhtmlx.com/gantt/api__gantt_work_time_config.html
Gantt will show the same dates in the grid because the hours will be different.
To show the duration in days and even in fractional values, you can use the formatters:
https://docs.dhtmlx.com/gantt/desktop__formatters_ext.html#durationformatter

Here is an example with the date input type in the inline editors:
http://snippet.dhtmlx.com/5/1b2d12c95
Here we need to modify the dates because the input element with the date type doesn’t have the hour values.

Here is another example with the datetime-local input type in the inline editors:
http://snippet.dhtmlx.com/5/c4f4b19aa
The input element may take more space, but it will store the dates more accurately.

#5

Hi Ramil,

Thanks for the response.

It seems like you didn’t get my question here. Let’s take the same snippet ( https://snippet.dhtmlx.com/18ccnr3i) again.

See the task #1 which starts on 2022-Jun-02 (Thursday) and duration is 2.

If you change the duration to 1, Gantt will display the end date as 2022-Jun-03 (Friday which is correct).

If you change the duration to 2, Gantt will display the end date as 2022-Jun-04 (Saturday), but it should display the end date as 2022-Jun-06 (Monday) since Saturday is a non working day as per the configuration.

If you change the duration to 3, Gantt will display the end date as 2022-Jun-07 (Tuesday which is correct again)

As per this behavior, Gantt will never display end date as Monday when Saturday and Sunday are non working days.

So in Summary, I want to always display a working day in the end date column, if the auto calculated date value in the end date inline editor is a non working date.

Thank you.

#6

Hi,

Can someone please help me with this.

Thank you.

#7

Hello Madhuka,
Thank you for the clarification.
When you use the wotk_time feature, the weekends are not included when you calculate the duration, so it is not the issue with the inline editor.
If you manually resize the task or modify its end_date and set it on Sunday, Gantt will display Sunday. But next time you update the task, Gantt will recalculate the duration. As the 2-day duration doesn’t include the weekends, the task ends when Saturday starts. That part works as expected.

If you want to make it work as you describe, you need to manually modify the task dates.
The easiest way for that would be to use the getClosestWorkTime method and specify the dir (direction) in future:

gantt.attachEvent("onBeforeTaskUpdate", function(id,task){
    task.end_date = gantt.getClosestWorkTime({
        date: task.end_date,
        dir: "future"
    })
});

https://docs.dhtmlx.com/gantt/api__gantt_getclosestworktime.html
Here is the updated snippet:
https://snippet.dhtmlx.com/eewzjnaz

1 Like