Gantt chart VBCS

Hi Dinesh,

1) Possible. You can supply a converter or custom formatter function for specific scales. For example, to format the "weeks" scale to have the "Jul 19 - Jul 25" format for the date representing Jul 19, you can do something like the following in your viewmodel, and add minor-axis.converter.weeks="[[weeksConverter]]" to your html:

import { IntlDateTimeConverter } from "ojs/ojconverter-datetime";

class ViewModel {
    ...
    // see https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.IntlDateTimeConverter.html#ConverterOptions
    // This converter converts ISO strings to e.g. "Jul 19, 2021"
    const dateConverter = new IntlDateTimeConverter({ dateFormat: "medium" }); 
    this.weeksConverter = {
        // Take in an ISO string e.g. "2021-07-19T00:00:00.000Z" and return "Jul 19 - Jul 25"
        format: (date) => {
            const day = 24 * 3600 * 1000;
            const endDate = new Date(new Date(date).getTime() + 6*day).toISOString();
            const start = dateConverter.format(date).split(',')[0]; // remove year
            const end = dateConverter.format(endDate).split(',')[0];
            return `${start} - ${end}`;
        }
    }
}

2) If you're okay with the label name and attachment icons to be outside of the chart area, to be shown in a column on the left, then you can turn on the row-axis in combination with providing a rowAxisLabelTemplate (see https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=multipleTasks). Otherwise, if you must require the labels to be inside the chart area, then in JET 11+ you may be able to use custom task renderers and render extra tasks just to hold the two labels (https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=taskDepTemplates) but your mileage may vary.

3) Not possible today, currently the start of the week is based on your locale's region.

HTH,

Wilson

I was working on my above question and found a solution. Wanted to post it in this thread if it may help others.

Adding a CSS "transform: translate(50px, 0px);" on oj-gantt-vertical-gridline moved the gridline to begin on Monday and end on a Sunday.