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.cssClass (string) - custom cell CSS class.

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

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

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

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

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

Notes

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.backColor = "#dddddd";
    }
  },
  // ...
});
gantt.init();

Angular

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

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

React

<DayPilotGantt
  onBeforeCellRender={onBeforeCellRender}
  {/* ... */}
/>

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

Vue

<DayPilotGantt
  @beforeCellRender="onBeforeCellRender"
  <!-- ... -->
/>

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

See Also

DayPilot.Gantt Class