Our state of the art Gantt chart


Post by shimnx »

I have defined a column of End dates, but the current format of End Date is different from the previous format of Start/Finish. How can I make it display the same format as Start/Finish

export default class FinishColumn extends Column {

static get $name() {
    return 'FinishColumn';
}

static get type() {
    return 'finishcolumn';
}

static get isGanttColumn() {
    return true;
}

static get defaults() {
    return {
        // Set your default instance config properties here
        field      : 'finish',
        text       : 'End Date',
        format: 'YYYY-MM-DD',
        type:'Date',
        cellCls    : 'b-status-column-cell',
        htmlEncode : false,
        // filterable : {
        //     filterField : {
        //         type  : 'combo',
        //         items : ['Not Started', 'Started', 'Completed', 'Late']
        //     }
        // }
    };
}

//endregion

renderer({ record }) {
    console.log(record)
    const finish = record.finish;

    return finish ? {
        tag       : 'i',
        className : `b-fa b-fa-circle ${finish}`,
        html      : finish
    } : '';
}

}

ColumnStore.registerColumnType(FinishColumn);
Attachments
屏幕截图 2022-09-29 095439.png
屏幕截图 2022-09-29 095439.png (23.76 KiB) Viewed 359 times

Post by tasnim »

Could you please explain what exactly you're trying to achieve? and what data type it is taking a string or a date string?

By the way, you can use the DateHelper.format to format the date in the renderer like this

finish = DateHelper.format(finish, 'MMM DD, YYYY');

https://bryntum.com/docs/gantt/api/Core/helper/DateHelper#function-format-static


Post by shimnx »

Because I want to display a custom date, but the format should be the same as the previous one, according to this method format still does not seem to work, our data format and the previous date format is the same


Post by tasnim »

Could you please provide us with a runnable test case? So it will be easy for us to assist you.


Post by shimnx »

I added a field in date format, schaefflerEndDate is the field name in the data, now there is a problem
When I double-click on this field to edit, it shows a different date than the actual date

import { Column, ColumnStore } from '@bryntum/gantt/gantt.lite.umd.js';
import { DateHelper } from '@bryntum/gantt/gantt.lite.umd.js';

/**
 * @module StatusColumn
 */

/**
 * A column showing the status of a task
 *
 * @extends Gantt/column/Column
 * @classType statuscolumn
 */
export default class FinishColumn extends Column {

    static get $name() {
        return 'FinishColumn';
    }

    static get type() {
        return 'finishcolumn';
    }

    static get isGanttColumn() {
        return true;
    }

    static get defaults() {
        return {
            field: 'schaefflerEndDate',
            text: 'Finish Date',
            editor: {
                type: 'DateField',

    },
    renderer({ value }) {
        console.log(value)
    },
    htmlEncode: false,

};
    }

//endregion

renderer({ record, ...data }) {
    console.log(record.schaefflerEndDate)
    const finish = DateHelper.format(new Date(record.schaefflerEndDate), 'MMM DD, YYYY');

    return finish ? {
        tag: 'i',
        className: `b-fa ${finish}`,
        html: finish
    } : '';
}

}

ColumnStore.registerColumnType(FinishColumn);

  columns: [
    {
                type: 'finishcolumn',
              
}, ]
Attachments
媒体3.mp4
(1.99 MiB) Downloaded 18 times

Post by tasnim »

Hello,
Instead of creating your own custom column, you could use https://bryntum.com/products/gantt/docs/api/Gantt/column/EndDateColumn of EndDateColumn

Example :

{ type : 'enddate', format : 'MMM/DD/YYYY' }

Post by shimnx »

Sorry, we need an extra date field besides endDate, so we can only customize the columns


Post by shimnx »

What format should I give here

 editor: {
                type: 'DateField',
                format: ????,

        },

Post by tasnim »

The format that you want it to show, for example format : 'MM-DD-YYYY'
And the value of type should be in lowercase (datefield)


Post by shimnx »

I want this format

Attachments
屏幕截图 2022-12-20 194304.png
屏幕截图 2022-12-20 194304.png (3.06 KiB) Viewed 259 times

Post Reply