Is it possible to add custom html and css to the daypilot gantt?

Asked by Anonymous
2 days ago.

I need to add custom HTML inside a Gantt chart to apply custom styles based on task status. For example, tasks that are "In Progress" should appear in green, while "Completed" tasks should be yellow, etc. Additionally, I want to display the progress percentage using striped patterns. Since the default HTML and CSS provided by DayPilot don’t support these customizations, I need a solution to achieve this. How can I fix this issue?

Answer posted by Dan Letecky [DayPilot]
1 day ago.

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";
  },
  // ...
}

For more complex styling (like using a striped background for the progress bar), you can add a custom CSS class to the task box and style the elements using CSS.

{
  onBeforeTaskRender: (args) => {
    args.data.box.cssClass = "my-task";
  },
  // ...
}

Is it possible to add custom html and css to the daypilot gantt?

Products

Learn

Get Support

DayPilot Pro