[VUE 3] Create custom lines in the gantt schedule

[pedro_softplan]

Hi, I wanna know if we can have those custom lines, like project start and project finish, but for other stuff.

Example: I wanna have a custom flag that is created by the user, like this:

custom

customline.png (108.38 KiB) Viewed 70 times

If doesn't supported native by bryntum, do you guys have any idea on how to include it? Should I create a custom store for those lines? Tkx in advance!

[tasnim]

Hi,

You can add this like this

msedge_k0tNyNaStk.gif (230.84 KiB) Viewed 60 times

Example:
First you'd need to have https://bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeRanges feature enabled.
You can replace the code of this demo https://bryntum.com/products/gantt/examples/basic/
with the code below

import { Gantt, StringHelper } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },

features : {
    timeRanges : true
},

tbar : [
    {
        type : 'button',
        text : 'Add timerange',
        onAction({ source }) {
            const gantt = source.up('gantt');
            gantt.timeRangeStore.add({
                id : 'custom2',
                name : 'Custom flag added by user',
                startDate : new Date("2019-01-14"),
                cls : 'red'
            });
        }
    }
],

columns : [
    { type : 'name', width : 250 }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

And this is the CSS I used

.b-sch-timerange.b-sch-timeranges.b-sch-line.red {
    background: red;
}

Docs
https://bryntum.com/products/gantt/docs/api/Scheduler/data/TimeRangeStore#function-add
https://bryntum.com/products/gantt/docs/api/Scheduler/model/TimeRangeModel

Hope it helps.

Best regards,
Tasnim

[pedro_softplan]

Exactly what I want. Thanks!