Gantt Chart Timeline

[admin]

Hi,
I have some question for the <smart-gantt-chart>!
1 – I have a gantt with props view=”day”, so in my timeline i see hour like 00:00:00 | 01:00:00 | … How can i modify this timeline for see hour like 00:00 | 01:00 (with no seconds)?
2 – When i drag/resize a task, i want to move the task by 5 min in 5 min. For example, if i start that task at 01:00, when i drag one time i want this task at 01:05, and if i drag again i want 01:10, 01:15… ecc. How can i do this?
3 – Can i custom the window task using vue.js?
Thanks in advance for your help!

[Hristofor]

Hi Matteo,
1) The timeline header can be customized using the timnelineHeaderFormatFunction. You can set a custom formatting function to that property in order to customize the text displayed in each cell inside the header. The function contains the following arguments (date, type, isHeaderDetails).

• date – the date that will be displayed inside the cell.
• type – is the view type for the date (year, month, week, day, hour)
• isHeaderDetails – a flag indicating whether this is a cell from the header details container(the first level of the header inside the timeline) or the second.

Here’s a demo on how to customize the dates in the header.
2) This feature is currently unavailable but we will include it in a future release. Currently we are working on a new major feature for the Gantt Chart – Resource management.
3) The window for task editing can be completely customized via the popupWindowCustomizationFunction. It accepts a callback with three arguments:

• target – the actual window.
• type – the type of editing ( ‘task’ or ‘connection’ are currently supported)
• taskIndex – the index of the task that is going to be edited.

Here is a demo showing how to customized the task editor.
We have a tutorial on how to create and apply settings on the elements using Vue.js. Here’s the link.
You can also customize the property editors for each task column using the customEditor property on specific taskColumns. Here’s an example on that.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Anonymous]

Hi,
I have a question for the timeline header visualization with week view. I want to use this type of view with durationUnit hour, in the first level of the header I would like to show the month and the year (ex: January 2021), in the second level (the cell) the day and the weekday (ex: Fri 29 ). But the cell and the month+year not corresponding correctly because the week visualization (correctly) not consider the beginning and the end of the month not with the days but with the week (the week end with Saturday and thus the month not finish with his last day); there is a correct configuration for my target?
This is my current code for this type of configuration:
var gantt = document.querySelector(‘smart-gantt-chart’);
gantt.hideTimelineHeaderDetails = false;
gantt.timelineHeaderFormatFunction = function(date, type, isHeaderDetails,
value) {
const ganttChart = document.querySelector(‘smart-gantt-chart’);
if (type === ‘week’) {
return date.toLocaleDateString(ganttChart.locale, {
month : ‘long’,
year : ‘numeric’,
});
}
if (type === ‘day’) {
return date.toLocaleDateString(ganttChart.locale, {
day : ‘numeric’,
weekday : ‘short’
});
}
return value;
};
gantt.locale = ‘it’;
gantt.showProgressLabel = false;
gantt.durationUnit = ‘hour’;
gantt.view = ‘week’;
gantt.treeSize = ‘40%’;
gantt.nonworkingHours = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 13, 18, 19, 20, 21,
22, 23 ];
gantt.nonworkingDays = [ 0, 6 ];
gantt.taskColumns = [ {
label : ‘TASK NAME’,
value : ‘label’,
size : ‘70%’
}, {
label : ‘END DATE’,
value : ‘dateEnd’,
size : ‘20%’,
}, {
label : ‘DURATION’,
value : ‘duration’,
size : ‘10%’,
} ];
gantt.dataSource = data;
Thanks in advance for your help.
Walter

[Hristofor]

Hi Walter,
Your code is correct, however the ‘week’ view of the Smart.GanttChart shows the weeks of the month on the first header row and the days on the second. This means that the cells for the days are aligned according to the weeks since that is the view. In ‘week’ view, months are not displayed. Changing the labels of the header does not change the cell rendering logic for the view. It only changes the label. So to you avoid the confusion you could include the week range(e.g. first date of week – last day of week) instead of only the year and monh name. We have a similar example that shows how to display the first and last days of the week for ‘month’ view. When customizing the cells for ‘week’ view the date argument of the timelineHeaderFormatFunction contains the first date of the week.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Anonymous]

Thank you for the reply Christopher.
I have an other question on the timeline header; The limit of the Gantt is the last endDate of task/project, if I want to drag the task for extend the endDate I can’t drag over this limit, it’s possible to increase the limit of the Gantt chart to a passed/configured value?
Thanks in advance for your help.
Walter

[Hristofor]

Hi Walter,
The dateStart and dateEnd property determine the timeline duration. By default if not set, they are automatically calculated depending on the tasks of the Smart.GanttChart. Changing the dateEnd property to a different date will update the timeline. Here’s more information on the dateEnd property from the API.
If you want to lear more, here’s is a dedicated topic on the Timeline features of the Smart.GanttChart.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Anonymous]

Hi Christopher,
 
Thank you for the reply, I confused the dateEnd of the dataSource project/task and the dateEnd of the chart.
Walter

[Author]

Posts