How to manage more than one type of date(Actual,Planned, Forecasted) in Gantt Chart

Gantt React Gantt
#1

I am having at least 3 types of Date , Actual , Auto Forecasted, Planned date.

I wan to show my task based on the least of date as start date and max of all the dates as end date to manage my gantt chart. So that when user click on task it should be able to see all these 3 type of date in lightbox. Task can support 2 dates in task like start_date and planned_start to configure. Is there a way to show 3 or more than 3 dates category in lightbox which can be mapped as input from the data object binded to gantt chart like this

{name: “actual”, type: “duration”, map_to: “auto”,id: “actual”},
{name: “forecasted”, type: “duration”, map_to: “auto”},
{name: “planned”, type: “duration”, map_to:{start_date:“planned_start”,end_date:“planned_start”}},

How to map the forecasted date which is coming in my dataset?

#2

Hello,

You can show any number of date categories in a lightbox using the Custom mapping. Here’s what it might look like:

gantt.config.lightbox.sections = [
    { name: 'description', map_to: 'text', type: 'textarea', height: 70, focus: true },
    {
        name: 'actual',
        map_to: { start_date: 'actual_start', end_date: 'actual_end' },
        type: 'duration'
    },
    {
        name: 'forecasted',
        map_to: { start_date: 'forecasted_start', end_date: 'forecasted_end' },
        type: 'duration'
    },
    {
        name: 'planned',
        map_to: { start_date: 'planned_start', end_date: 'planned_end' },
        button: true,
        type: 'duration_optional'
    },
];

As an example, I used a task object with the following properties:

tasks: [
    { id: 2, text: 'Task #1', start_date: '03-02-2024 00:00', duration: 1,
        actual_start: '03-02-2024 00:00', actual_end: '06-02-2024 00:00',
        forecasted_start: '02-02-2024 00:00', forecasted_end: '05-02-2024 00:00',
        planned_start: '01-02-2024 00:00', planned_end: '05-02-2024 00:00',
    },
    ...

Gantt automatically converts the ‘start_date’ and ‘end_date’ properties into a ‘Date’ object, so you’ll need to manually convert custom dates:

function parseDateProperties(task, dateProperties) {
    dateProperties.forEach((property) => {
        task[property] = gantt.date.parseDate(task[property], gantt.config.date_format);
    });
}

gantt.attachEvent('onTaskLoading', (task) => {
    const startProperties = ['actual_start', 'forecasted_start', 'planned_start'];
    const endProperties = ['actual_end', 'forecasted_end', 'planned_end'];

    parseDateProperties(task, startProperties);
    parseDateProperties(task, endProperties);

Please see an example: DHTMLX Snippet Tool

#3

Thanks a lot Maksim.Appreciate your timely response.It worked.

1 Like