Questions Tagged gantt

Answered: You can set the date range using startDate and days properties. If these properties are not specified, the Gantt chart will calculate the values automatically to include all tasks.

Answered: At this moment, the Gantt chart requires the exact date/time points when specifying the task end. For example, a task that ends on May 31, 2025 needs to use end: "2025-06-01T00:00:00" . The Scheduler...

Answered: You can change the startDate and days properties as needed by calling the update() method: gantt.update({ startDate: "2025-05-01", days: 31 });

Answered: You can use the onBeforeTaskRender event handler to customize the task boxes . This event will let you set custom color easily. { onBeforeTaskRender: (args) => { args.data.box.backColor = "#cc0000"; ...

Answered: There is now a new version of the Theme Designer available. It will generate an up-to-date CSS. Please let me know if the problem persists.

Answered: The exportAs() method returns a DayPilot.Export which you can use to get the exported object, start a download, etc. To download the image immediately, you can use this: this.dp.exportAs(this.state.e...

Answered: You can add custom objects (icons, etc.) to the row header columns using active areas. To add an active area, use the onBeforeRowHeaderRender event handler: onBeforeRowHeaderRender = (args) => { args...

Answered: Unfortunately, this is not possible.

Answered: The Gantt chart component is not designed for this mode, but you can hide the the time grid using the following properties: scale: "Manual", startDate: "2020-01-01", // use a day in the past

Answered: You can change the icons using CSS. This is how the icons are defined in the default CSS theme : .gantt_default_tree_image_expand { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naH...

Answered: When you need to load a new task set in the Gantt chart, the best way is to replace the tasks with a new array: const tasks = [ /* ... */ ]; dp.update({tasks}); There is no need to clear the events f...

Answered: The shape of the task group is created using :before and :after pseudo-elements. In the default theme it looks like this: .gantt_default_task_group .gantt_default_event_inner { position: absolute; to...

Answered: The cssClass property will be added in the next release. At this moment, you can apply custom class using the "theme" property. The theme name is used as a prefix for all classes used for menu elemen...

Answered: At this moment, the vertical scrollbar is not implemented. Just adding the CSS isn't enough as the calculated height needs to be taken into account. I recommend splitting the long list into several g...

Answered: Yes, you can add a custom progress bar using active areas. This approach is outlined in this tutorial (it's for React and Scheduler but the same logic can be used in the Gantt chart component): https...

Answered: You can find the documentation here: Resizing: https://doc.daypilot.org/gantt/task-resizing/ https://api.daypilot.org/daypilot-gantt-ontaskresize/ Moving (horizontal): https://doc.daypilot.org/gantt/...

Answered: Sorry for the confusion. You can do this by changing the order of tasks in the data source (it's stored in dp.tasks.list). Then call update() to apply the changes.

Answered: This issue should be fixed now in the latest sandbox build (2023.1.5540): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

Answered: This should work fine - DayPilot.Gantt.exportAs() method uses the same syntax as DayPilot.Scheduler.exportAs(). However, the range defined using "dateFrom" and "dateTo" can only define a subset of th...

Answered: The latest release now supports export customization events in the Gantt Chart component as well ( https://javascript.daypilot.org/daypilot-pro-for-javascript-2023-1-5529/ ). You can use onBeforeRowH...

Answered: There is a special React package that defines a <DayPilotGantt> React component which you can use in your JSX instead of creating the instance manually using a placeholder and init() method. To see h...

Answered: The Gantt Chart component uses the "locale" property to determine the first day of week: https://api.daypilot.org/daypilot-gantt-locale/ You can use one of the built-in locales or create your own. Se...

Answered: Please see my comments here: https://forums.daypilot.org/question/5962/how-to-export-gantt-chart-view-in-png-svg-pdf-in-2022-4-548

Answered: In the latest sandbox build (2022.4.5479), there is now a new property (maxAutoWidth) added to the rowHeaderColumns array items that lets you specify a maximum width that will be respected during row...

Answered: 1. Unfortunately, I'm not able to reproduce the first issue. In Angular, it's important to remember that the expanded/collapsed state is stored in the data source. If you load the Gantt chart tasks u...

Answered: By default, the state of all Gantt chart groups is set to "expanded". You can keep the children collapsed by setting Expanded = false when loading tasks.

Answered: Unfortunately, it's not possible to change the task group inner HTML in ASP.NET.

Answered: Hi Hicham, This should be fixed now in the latest sandbox build (2021.4.5152). Thanks for reporting the issue!

Answered: Please see my comments here: https://forums.daypilot.org/question/5509/how-can-i-make-sticky-date-header-of-angular-gantt-view

Answered: You can customize the image export using the onBeforeEventExport method of the internal scheduler object: https://api.daypilot.org/daypilot-scheduler-onbeforeeventexport/ For cells, use the onBeforeC...