Questions Tagged gantt
Setting up Start and End Date for Daypilot gantt chart
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.
gantt chart end date issue
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 ...
How to automatically moved to initial startdate and enddate of ganttchart
Answered: You can change the startDate and days properties as needed by calling the update() method: gantt.update({
startDate: "2025-05-01",
days: 31
});
Is it possible to add custom html and css to the daypilot gantt?
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 = "#cc...
when custom theme link is not proper
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.
How to export Gantt chart for range opttion
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...
dropdown in progress bar
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) => {
...
Is it possible to Spread the left area of the gantt chart to maximum width?
Answered: Unfortunately, this is not possible.
Is there any way we can hide the right side of the gantt chart
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
can we change the expander or collapse icon
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,PHN2ZyB4bWxucz...
Removing all tasks from a gantt chart without disposing of it
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 ...
How to change Group task background color?
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: absolut...
How to add cssClass to Context Menu in Gantt Chart View.
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...
Gantt View: scrollable context menu or a button to expand
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...
Gantt View: Is it possible to have more that one progress bars for the Gantt task
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...
Moving and resizing tasks was not explained
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/...
How to implement row-up and row-down in gantt view.
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.
Getting error while downloading a range image
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.
Is there any way to export range SVG/PNG in Gantt View?
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...
How to export Gantt chart view in png/svg/pdf in 2022.4.5483 version.
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 onBeforeRowHea...
Does Gantt have a dispose() method?
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...
How to set the start of the week as monday
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...
How to export Gantt view in png/svg/pdf
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
Any Option for Max-Width for the columns or Resizable height
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...
Angular Gantt chart row header expand collapse not working.
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...
Automatically collapse child tasks
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.
box.html in group mode
Answered: Unfortunately, it's not possible to change the task group inner HTML in ASP.NET.
Missing typing in DayPilot.GanttPropsAndEvents
Answered: Hi Hicham, This should be fixed now in the latest sandbox build (2021.4.5152). Thanks for reporting the issue!
Gannt View Sticky date header.
Answered: Please see my comments here: https://forums.daypilot.org/question/5509/how-can-i-make-sticky-date-header-of-angular-gantt-view
Problems when exporting Gantt as jpeg
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...
Questions 1-30 of 63
Next