Our state of the art Gantt chart


Post by shimnx »

We want to show on the Gantt graph that our actual holidays are our holidays, not just weekends, how do we do that

Attachments
屏幕截图 2022-05-23 151717.png
屏幕截图 2022-05-23 151717.png (9.61 KiB) Viewed 345 times

Post by shimnx »

If it's a holiday, you want a specific background color


Post by alex.l »

All you need is to add holidays into project's calendar as non working intervals. Here is the guide https://bryntum.com/docs/gantt/guide/Gantt/basics/calendars
There is a special field https://bryntum.com/docs/gantt/api/SchedulerPro/model/CalendarIntervalModel#field-cls to apply styling for intervals.
We use calendars in all our Gantt demos, check data JSON files. As example, in this demo https://bryntum.com/examples/gantt/advanced

All the best,
Alex


Post by shimnx »

Please check my data problem

{
            "eventsData": [
                {
                    "id": "35d85d02-1477-475a-84f9-12851319c5f9",
                    "parentId": null,
                    "name": "New task 2",
                    "percentDone": 0,
                    "startDate": "2022-06-22",
                    "rollUp": null,
                    "duration": 21,
                    "endDate": "2022-07-13",
                    "showInTimeline": null,
                    "baseLines": [],
                    "children": null,
                    "PhantomId": null,
                    "expanded": null,
                    "note": null,
                    "draggable": true,
                    "resizable": null,
                    "constraintDate": "2022-06-01",
                    "constraintType": "startnoearlierthan",
                    "durationUnit": "day",
                    "deadLineDate": null,
                    "effort": 4,
                    "effortDriven": false,
                    "effortUnit": "hour",
                    "inactive": null,
                    "manuallyScheduled": false,
                    "schedulingMode": "Normal",
                    "slackUnit": "hour",
                    "cls": "",
                    "iconCls": null,
                    "style": null,
                    "taskIconCls": null,
                    "parentIndex": 3,
                    "IsAllowDelete": true,
                    "BookedHours": 0,
                    "InvolveWorkLogs": [],
                    "status": 'finished'
                },
                {
                    "id": "3a0395c9-7053-8362-8067-590fb72656f8",
                    "parentId": null,
                    "name": "3",
                    "percentDone": 0,
                    "startDate": "2022-05-31",
                    "rollUp": null,
                    "duration": 21,
                    "endDate": "2022-06-21",
                    "showInTimeline": null,
                    "baseLines": [],
                    "status": 'finished',
                    "children": [
                        {
                            "id": "a39f6bf0-8b1f-4f65-ac00-000a46db1b70",
                            "parentId": "3a0395c9-7053-8362-8067-590fb72656f8",
                            "name": "New task 4",
                            "percentDone": 0,
                            "startDate": "2022-05-31",
                            "rollUp": null,
                            "duration": 21,
                            "endDate": "2022-06-21",
                            "showInTimeline": null,
                            "baseLines": [],
                            "children": null,
                            "PhantomId": null,
                            "expanded": null,
                            "note": null,
                            "draggable": true,
                            "resizable": null,
                            "constraintDate": "2022-05-06",
                            "constraintType": "startnoearlierthan",
                            "durationUnit": "day",
                            "deadLineDate": null,
                            "effort": 4,
                            "effortDriven": false,
                            "effortUnit": "hour",
                            "inactive": false,
                            "manuallyScheduled": false,
                            "schedulingMode": "Normal",
                            "slackUnit": "hour",
                            "cls": "",
                            "iconCls": null,
                            "style": null,
                            "taskIconCls": null,
                            "parentIndex": 0,
                            "IsAllowDelete": true,
                            "BookedHours": 0,
                            "status": 'finished',
                            "InvolveWorkLogs": []
                        },
                        {
                            "id": "bb1d478c-7a10-4292-9bab-25778e26f6e8",
                            "parentId": "3a0395c9-7053-8362-8067-590fb72656f8",
                            "name": "New task 1",
                            "percentDone": 0,
                            "startDate": "2022-05-31",
                            "rollUp": null,
                            "duration": 21,
                            "endDate": "2022-06-21",
                            "showInTimeline": null,
                            "baseLines": [],
                            "children": null,
                            "PhantomId": null,
                            "expanded": null,
                            "note": null,
                            "draggable": true,
                            "resizable": null,
                            "constraintDate": "1905-01-01",
                            "constraintType": "startnoearlierthan",
                            "durationUnit": "day",
                            "deadLineDate": null,
                            "effort": 4,
                            "effortDriven": false,
                            "effortUnit": "hour",
                            "inactive": null,
                            "status": 'finished',
                            "manuallyScheduled": false,
                            "schedulingMode": "Normal",
                            "slackUnit": "hour",
                            "cls": "",
                            "iconCls": null,
                            "style": null,
                            "taskIconCls": null,
                            "parentIndex": 1,
                            "IsAllowDelete": true,
                            "BookedHours": 0,
                            "InvolveWorkLogs": []
                        }
                    ],
                    "PhantomId": null,
                    "expanded": null,
                    "note": null,
                    "draggable": true,
                    "resizable": null,
                    "constraintDate": "2022-05-06",
                    "constraintType": "startnoearlierthan",
                    "durationUnit": "day",
                    "deadLineDate": null,
                    "effort": 8,

                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": false,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 0,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "3a0395cd-ceba-beaa-44cb-131438799a5c",
                "parentId": null,
                "name": "2",
                "percentDone": 0,
                "startDate": "2022-06-21",
                "rollUp": null,
                "duration": 21,
                "status": 'finished',
                "endDate": "2022-07-12",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-05-06",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 5,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "3a0395cd-cebd-cf25-60e4-240a49117c47",
                "parentId": null,
                "name": "1",
                "percentDone": 0,
                "startDate": "2022-06-21",
                "rollUp": null,
                "duration": 21,
                "endDate": "2022-07-12",
                "showInTimeline": null,
                "status": 'finished',
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-05-19",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 6,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "3a0395cd-cec0-97e8-28a1-fc8f5a628921",
                "parentId": null,
                "name": "58",
                "percentDone": 0,
                "startDate": "2022-06-01",
                "rollUp": null,
                "duration": 21,
                "endDate": "2022-06-22",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-06-01",
                "status": 'finished',
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 7,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "3a03a415-7c8e-7d2c-647b-b6e32a080137",
                "parentId": null,
                "name": "New task 1",
                "percentDone": 0,
                "startDate": "2022-06-21",
                "rollUp": null,
                "status": 'finished',
                "duration": 21,
                "endDate": "2022-07-12",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-06-01",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 8,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "3a03a415-7c8e-8c42-e41a-c111a0fe1999",
                "parentId": null,
                "name": "New task 2",
                "status": 'finished',
                "percentDone": 0,
                "startDate": "2022-06-22",
                "rollUp": null,
                "duration": 21,
                "endDate": "2022-07-13",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-06-01",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 2,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "64cd0247-aa61-45f3-9493-ab61d73224fe",
                "parentId": null,
                "name": "New task test",
                "percentDone": 0,
                "startDate": "2022-05-31",
                "rollUp": null,
                "status": 'finished',
                "duration": 1,
                "endDate": "2022-06-01",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": null,
                "constraintType": null,
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 24,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 9,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "6a28f637-b62f-4ff2-af2d-21a1b4be66d5",
                "parentId": null,
                "name": "8",
                "percentDone": 0,
                "startDate": "2022-05-31",
                "rollUp": null,
                "duration": 1,
                "endDate": "2022-06-01",
                "showInTimeline": null,
                "baseLines": [],
                "status": 'finished',
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": null,
                "constraintType": null,
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 24,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 10,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "8613b054-4b61-41ad-90bf-b0b43fa352b6",
                "parentId": null,
                "name": "New task 1",
                "percentDone": 0,
                "startDate": "2022-06-01",
                "rollUp": null,
                "duration": 21,
                "endDate": "2022-06-22",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "status": 'finished',
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-06-01",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 4,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "9e98284a-70ee-4012-b368-238a00f3bf2a",
                "parentId": null,
                "name": "8",
                "percentDone": 0,
                "startDate": "2022-05-31",
                "status": 'finished',
                "rollUp": null,
                "duration": 1,
                "endDate": "2022-06-01",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": null,
                "constraintType": null,
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 24,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 7,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "9eaf8982-6900-4e88-9f1d-0dca05e26c5a",
                "parentId": null,
                "name": "New task",
                "percentDone": 0,
                "startDate": "2022-05-31",
                "rollUp": null,
                "duration": 1,
                "status": 'finished',
                "endDate": "2022-06-01",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": null,
                "constraintType": null,
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 24,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": null,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 11,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            },
            {
                "id": "ca517c02-1f18-44b9-96a0-05daf323e7a7",
                "parentId": null,
                "name": "New task 3",
                "percentDone": 0,
                "startDate": "2022-06-21",
                "status": 'finished',
                "rollUp": null,
                "duration": 21,
                "endDate": "2022-07-12",
                "showInTimeline": null,
                "baseLines": [],
                "children": null,
                "PhantomId": null,
                "expanded": null,
                "note": null,
                "draggable": true,
                "resizable": null,
                "constraintDate": "2022-05-06",
                "constraintType": "startnoearlierthan",
                "durationUnit": "day",
                "deadLineDate": null,
                "effort": 4,
                "effortDriven": false,
                "effortUnit": "hour",
                "inactive": false,
                "manuallyScheduled": false,
                "schedulingMode": "Normal",
                "slackUnit": "hour",
                "cls": "",
                "iconCls": null,
                "style": null,
                "taskIconCls": null,
                "parentIndex": 1,
                "IsAllowDelete": true,
                "BookedHours": 0,
                "InvolveWorkLogs": []
            }
        ],
        "dependenciesData": [
            {
                "id": "3a0395cb-8647-5ef7-090e-043971c02f0d",
                "fromTask": "03467c06-0bbd-4283-9dc3-19fb55823798",
                "toTask": "3a0395c9-7053-8362-8067-590fb72656f8",
                "lag": 0
            },
            {
                "id": "3a0395cd-ced5-a746-38c8-1940e45d0fa5",
                "fromTask": "3a0395c9-7053-8362-8067-590fb72656f8",
                "toTask": "321f07b1-24e8-407d-b894-d461a1c561b0",
                "lag": 0
            },
            {
                "id": "3a0395cd-ced7-abb1-d655-7956bf82376a",
                "fromTask": "03fc4538-6277-4be7-94fe-74eadac3a02b",
                "toTask": "3a0395c9-7053-8362-8067-590fb72656f8",
                "lag": 0
            },
            {
                "id": "3a0395cd-ced9-bb65-8b9a-ea055c8f2ceb",
                "fromTask": "321f07b1-24e8-407d-b894-d461a1c561b0",
                "toTask": "f14c9e33-5da0-4ec7-8df5-1f6d1da09efd",
                "lag": 0
            },
            {
                "id": "3a03a415-7cd6-f921-214e-a423fa03c44d",
                "fromTask": "3a0395cd-cec0-97e8-28a1-fc8f5a628921",
                "toTask": "8c071a3f-b365-4cd3-9245-80fc3dc8a53d",
                "lag": 0
            },
            {
                "id": "3a03a415-b649-c49a-f8ad-0ce5603867ed",
                "fromTask": "3a0395cd-cec0-97e8-28a1-fc8f5a628921",
                "toTask": "3a03a415-7c8e-7d2c-647b-b6e32a080137",
                "lag": 0
            },
            {
                "id": "3a03f129-d31b-3574-c123-628ee0fce69b",
                "fromTask": "3a0395c9-7053-8362-8067-590fb72656f8",
                "toTask": "ca517c02-1f18-44b9-96a0-05daf323e7a7",
                "lag": 0
            },
            {
                "id": "3a03f129-d31b-f147-afe8-7a9d6b0757c0",
                "fromTask": "3a03a415-7c8e-8c42-e41a-c111a0fe1999",
                "toTask": "35d85d02-1477-475a-84f9-12851319c5f9",
                "lag": 0
            }
        ],
        "resourcesData": [
            {
                "id": "28019256",
                "name": "Wang, Chuan",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28019256.jpg",
                "orgCode": "OP/TCG-ZSD13"
            },
            {
                "id": "28020045",
                "name": "Feng, Lingyuan",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28020045.jpg",
                "orgCode": "OP/TCG-ZSEH"
            },
            {
                "id": "28001268",
                "name": "Youquan",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28001268.jpg",
                "orgCode": "OP/TCG-ZS"
            },
            {
                "id": "28017006",
                "name": "Huang, Lifeng",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28017006.jpg",
                "orgCode": "OP/TCG-ZSA21"
            },
            {
                "id": "28005174",
                "name": "Qian, Wenbin",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28005174.jpg",
                "orgCode": "OP/TCG-ZSQ1"
            },
            {
                "id": "28015782",
                "name": "Yan, Wenwu",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28015782.jpg",
                "orgCode": "OP/TCG-ZSX"
            },
            {
                "id": "28028123",
                "name": "Zhu, Jian",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28028123.jpg",
                "orgCode": "OP/TCG-ZSES2"
            },
            {
                "id": "28027165",
                "name": "Lou, Changgui",
                "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28027165.jpg",
                "orgCode": "OP/TCG-ZSD21"
            }
        ],
        "assignmentsData": [
            {
                "id": "3a03a415-7c8e-8c42-e41a-c111a0fe1999",
                "eventId": "3a03a415-7c8e-8c42-e41a-c111a0fe1999",
                "resourceId": "28001268"
            },
            {
                "id": "64cd0247-aa61-45f3-9493-ab61d73224fe",
                "eventId": "64cd0247-aa61-45f3-9493-ab61d73224fe",
                "resourceId": "28005174"
            }
        ],
        "calendarsData": [
            {
                "id": "general",
                "name": "General",
                "intervals": [
                    {
                        "startDate": "2019-01-02",
                        "endDate": "2019-05-28",
                        "isWorking": false
                    }
                ],
            }
        ],
        "projectData": {
            "calendar": "general",
            "startDate": "0001-01-01T00:00:00",
            "hoursPerDay": 24,
            "daysPerWeek": 5,
            "daysPerMonth": 20
        }
    }

Post by alex.l »

Please describe what problem you have, steps to reproduce, actual and expected results. Here is our guide "How to ask for help" viewtopic.php?t=772

Thank you!

All the best,
Alex


Post by shimnx »

Sorry,this is my data, I loaded it with loadInlineData, but it doesn't work

"calendarsData": [
            {
                "id": "general",
                "name": "General",
                "intervals": [
                    {
                        "startDate": "2019-01-02",
                        "endDate": "2019-05-28",
                        "isWorking": false
                    }
                ],
            }
        ],

Post by alex.l »

Your JSON looks ok. We need to see all configuration to help you. First thing to check, if you set this calendar as active in your project settings. Or maybe you assign this calendar to task or resource?
Please have a look at our guide: https://bryntum.com/docs/gantt/guide/Gantt/basics/calendars
https://bryntum.com/docs/gantt/guide/Gantt/basics/calendars#inline-calendars-data
https://bryntum.com/docs/gantt/guide/Gantt/basics/calendars#assigning-a-calendar-through-the-ui

And review demo: https://bryntum.com/examples/gantt/advanced
We have example of how to set calendar in the source code.

{
    "success"      : true,
    "project"      : {
        "calendar"     : "general",
        "startDate"    : "2019-01-14",
        "hoursPerDay"  : 24,
        "daysPerWeek"  : 5,
        "daysPerMonth" : 20
    },
    "calendars"    : {

Or using config
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#field-calendar

If you did it, we need a test case to reproduce your problem and more context, what is actual and expected result.

In your full JSON I see projectData section, but we don't support that config, I already mentioned that in your previous posts. To set project config, please use project instance.

gantt.project.calendar = 'something';
gantt.project.startDate = new Date();

Or setup project in initial config, if it's possible in your use case.

All the best,
Alex


Post by shimnx »

Here's my example, so you can run it and try it out,I looked at the official example, but the official example loads the data differently than I do, so I think there might be a problem here.

Thank you!

Attachments
advanced examples.zip
(137.62 KiB) Downloaded 38 times

Post by alex.l »

You didn't set active calendar, as I described above.
2 options to do that. 1 - add to config file

const ganttConfig = {
    
[...] project: { calendar : 'general',
  1. Set on project instance
            this.gantt.project.calendar = (this.gantt.project.calendarManagerStore.getById('general') as CalendarModel);
    

Since you use TypeScript, you'll be needed to cast a type. getById is described in base Store class, so now it expects base Model as a result. We have an opened ticket to fix that moment https://github.com/bryntum/support/issues/1949

All the best,
Alex


Post Reply