DayPilot.Gantt.onBeforeCellRender

The onBeforeCellRender event handler fires before a grid cell is rendered. You can use it to customize the cell appearance.

Declaration

DayPilot.Gantt.onBeforeCellRender(args)

Parameters

• args.control (DayPilot.Gantt) - control instance.

• args.task (DayPilot.Task) - row item associated with the rendered cell.

• args.cell.start (DayPilot.Date) - cell start (read-only).

• args.cell.end (DayPilot.Date) - cell end (read-only).

• args.cell.properties.cssClass (string) - custom cell CSS class.

• args.cell.properties.html (string) - custom cell HTML.

• args.cell.properties.backImage (string) - background image URL.

• args.cell.properties.backRepeat (string) - background-repeat style.

• args.cell.properties.backColor (string) - custom cell background color, for example "#ccc" or "red".

• args.cell.properties.business (boolean) - business/non-business status.

Notes

Set cell appearance using args.cell.properties. Cell dates remain on args.cell, and task data is available through args.task.

Use this event to set custom HTML, CSS classes, background styling, or business-cell flags before the cell is displayed.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onBeforeCellRender: (args) => {
    if (args.cell.start.getDayOfWeek() === 6) {
      args.cell.properties.backColor = "#dddddd";
    }
  },
  // ...
});
gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

config: DayPilot.GanttConfig = {
  onBeforeCellRender: args => {
    if (args.cell.start.getDayOfWeek() === 6) {
      args.cell.properties.backColor = "#dddddd";
    }
  },
  // ...
};

React

<DayPilotGantt
  onBeforeCellRender={onBeforeCellRender}
/>

const onBeforeCellRender = (args) => {
  if (args.cell.start.getDayOfWeek() === 6) {
    args.cell.properties.backColor = "#dddddd";
  }
};

Vue

<DayPilotGantt
  @beforeCellRender="onBeforeCellRender"
/>

const onBeforeCellRender = (args) => {
  if (args.cell.start.getDayOfWeek() === 6) {
    args.cell.properties.backColor = "#dddddd";
  }
};

See Also

DayPilot.Gantt Class