I applied your solution then the dates are same but time not calculated properly. I show the expected time with yellow text in the below.
<GanttComponent
id='cloud-scheduler-gantt'
dataSource={this.state.GantData}
enablePredecessorValidation={false}
ref={(gant: GanttComponent) => (this.gantObj = gant)}
dateFormat='dd/MM/yyyy HH:mm'
durationUnit='Hour'
actionComplete={this.actionCompletedElement.bind(this)}
actionBegin={this.actionBegin.bind(this)}
dataBound={this.dataBound.bind(this)}
treeColumnIndex={4}
contextMenuItems={this.contextMenuItems}
contextMenuOpen={this.contextMenuOpen.bind(this)}
contextMenuClick={this.contextMenuClick.bind(this)}
showColumnMenu={true}
taskType='FixedWork'
width={'100%'}
taskbarEditing={this.taskbarEditing.bind(this)}
allowFiltering={true}
selectionSettings={{
type: 'Multiple',
mode: 'Row',
enableToggle: true,
}}
allowSorting={true}
connectorLineBackground='red'
allowResizing={true}
workWeek={[
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
]}
toolbarClick={this.toolbarClick.bind(this)}
editDialogFields={this.editDialogFields}
projectStartDate={this.state.projectStartDate}
projectEndDate={this.state.projectEndDate}
allowRowDragAndDrop={false}
queryCellInfo={this.gantCellQuery.bind(this)}
rowSelected={this.rowSelected}
rowDeselected={this.rowDeselected}
taskFields={{
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
notes: 'info',
resourceInfo: 'Resources',
segments: 'Segments',
work: 'Work',
}}
timelineSettings={this.timelineSettings}
labelSettings={this.labelSettings}
editSettings={
this.state.current_plan_isLocked
? undefined
: this.editSettings
}
height={
this.state.status
? 'calc(-130px + 70vh)'
: 'calc(-130px + 100vh)'
}
gridLines={'Both'}
toolbar={
this.props.isSuperVisor ? this.toolbarAdmin : this.toolbar
}
resourceFields={this.resourceFields}
resources={this.state.resourceData}
enableContextMenu={true}
filterSettings={{ type: 'Menu' }}
allowExcelExport={true}
allowPdfExport={true}
allowReordering={true}
highlightWeekends={true}
enableVirtualization={false}
splitterSettings={{
columnIndex: 2,
position: '60%',
}}
dayWorkingTime={this.state.dayWorkingTime}
timezone={Intl.DateTimeFormat().resolvedOptions().timeZone}
>
<ColumnsDirective>
{columns.map((el: any) => {
return (
<ColumnDirective
key={el.field}
field={el.field}
headerText={el.headerText}
width={el.width}
visible={el.visible}
editType={el.editType}
edit={el.edit}
type={el.type}
format={el.format}
allowEditing={el.allowEditing}
displayAsCheckBox={el.displayAsCheckBox}
template={el.template}
/>
);
})}
</ColumnsDirective>
<EditDialogFieldsDirective>
{editDialogFields.map((el) => {
return (
<EditDialogFieldDirective
key={el.type}
type={el.type as any}
headerText={el.headerText}
/>
);
})}
</EditDialogFieldsDirective>
<Inject
services={[
Edit,
Selection,
Toolbar,
DayMarkers,
CriticalPath,
Resize,
ColumnChooser,
Filter,
ContextMenu,
ColumnMenu,
VirtualScroll,
ExcelExport,
PdfExport,
Sort,
Reorder,
]}
/>
</GanttComponent>
What should I do? I still think the feature is related with the gantt component becasue I didnt play with the data to change dates.
Thank you.
