[ANGULAR] Gantt diagram custom date column format display
Posted: Thu Sep 29, 2022 3:58 am
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);
Re: [ANGULAR] Gantt diagram custom date column format display
Posted: Thu Sep 29, 2022 8:26 am
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
Re: [ANGULAR] Gantt diagram custom date column format display
Posted: Fri Sep 30, 2022 10:56 am
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
Re: [ANGULAR] Gantt diagram custom date column format display
Posted: Fri Sep 30, 2022 11:43 am
by tasnim
Could you please provide us with a runnable test case? So it will be easy for us to assist you.
Re: [ANGULAR] Gantt diagram custom date column format display
Posted: Tue Dec 20, 2022 9:48 am
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',
},
]
Re: [ANGULAR] Gantt diagram custom date column format display