Use this way to initialize the gantt graph, and then the project startDate cannot be initialized.
And my gantt's config is not init project params.
The error is as follows
Okey.
Below is my demo.
I tried two methods to initialize the project start date, but neither of them worked properly.
import React, { Fragment } from 'react';
import { BryntumDemoHeader, BryntumGantt, BryntumThemeCombo } from '@bryntum/gantt-react';
import './lib/StatusColumn';
import './lib/GanttToolbar';
import './App.scss';
const tasks = [
{
"duration": 1,
"endDate": "2023-02-03",
"id": 1,
"isLeaf": 1,
"manuallyScheduled": true,
"name": "task 1",
"note": "",
"parentId": 0,
"parentIndex": 0,
"percentDone": 0,
"startDate": "2023-02-02",
"children": [
{
"children": [],
"duration": 1,
"endDate": "2023-01-03",
"id": 2,
"isLeaf": 1,
"manuallyScheduled": true,
"name": "task 2",
"note": "",
"parentId": 1,
"parentIndex": 0,
"percentDone": 0,
"startDate": "2023-02-02"
}
]
}
]
const dependencies = [
{
"fromTask": 1,
"toTask": 2,
"type": 2,
"lag": 1
}
]
const resources = [
{ "id" : 1, "name" : "Celia", "city" : "Barcelona", "calendar" : null, "image" : "celia.jpg" },
{ "id" : 2, "name" : "Lee", "city" : "London", "calendar" : null, "image" : "lee.jpg" },
{ "id" : 3, "name" : "Macy", "city" : "New York","calendar" : null, "image" : "macy.jpg" },
{ "id" : 4, "name" : "Madison", "city" : "Barcelona", "calendar" : null,"image" : "madison.jpg" },
{ "id" : 5, "name" : "Rob", "city" : "Rome", "calendar" : "business", "image" : "rob.jpg" },
{ "id" : 6, "name" : "Dave", "city" : "Barcelona", "calendar" : "night", "image" : "dave.jpg" },
{ "id" : 7, "name" : "Dan", "city" : "London", "calendar" : "night", "image" : "dan.jpg" },
{ "id" : 8, "name" : "George", "city" : "New York", "calendar" : null, "image" : "george.jpg" },
{ "id" : 9, "name" : "Gloria", "city" : "Rome", "calendar" : null, "image" : "gloria.jpg" },
{ "id" : 10, "name" : "Henrik", "city" : "London", "calendar" : null, "image" : "henrik.jpg" }
]
const assignments = [
]
const columns = [
{ type: 'wbs' },
{ type: 'name', width: 250 },
{ type: 'startdate' },
{ type: 'duration' },
{ type: 'resourceassignment', width: 120, showAvatars: true },
{ type: 'percentdone', showCircle: true, width: 70 },
{
type : 'predecessor',
width : 112
},
{
type : 'successor',
width : 112
},
{ type: 'schedulingmodecolumn' },
{ type: 'calendar' },
{ type: 'constrainttype' },
{ type: 'constraintdate' },
{ type: 'statuscolumn' },
{
type : 'date',
text : 'Deadline',
field : 'deadline'
},
{ type: 'addnew' }
]
const ganttConfig = {
tbar : { type: 'gantttoolbar' },
dependencyIdField : 'wbsCode',
newTaskDefaults: {
duration: 1,
manuallyScheduled: true
},
// project: {
// "startDate" : "2019-01-20", the first method
// },
resourceImageFolderPath : 'users/',
subGridConfigs: {
locked: {
flex : 3
},
normal: {
flex : 4
}
},
columnLines : false,
rollupsFeature: {
disabled : true
},
baselinesFeature: {
disabled : true
},
progressLineFeature: {
disabled : true,
statusDate : new Date(2019, 0, 25)
},
filterFeature : true,
dependencyEditFeature : true,
timeRangesFeature : {
showCurrentTimeLine : true
},
labelsFeature: {
left: {
field : 'name',
// editor : {
// type : 'textfield'
// }
}
}
};
const App = props => {
return <>
<BryntumGantt
tasks={tasks}
assignments={assignments}
dependencies={dependencies}
resources={resources}
columns={columns}
// project={{startDate: '2020-03-10'}} the second method
{...ganttConfig}
/>;
</>
};
export default App;
Hey chenghuang,
I'm sharing an example project with the startDate set as I shared with you and a screenshot of that start date being displayed as I configured it.
Best regards,
Márcio
Hey chenghuang,
That's the expected behavior if you change for something like
startDate={'2020-10-01'}
You'll change the start of the project to be like the attached screenshot.
What do you want to achieve exactly? Change the view to be earlier than the project start date?
Best regards,
Márcio