DayPilot.Scheduler.onBeforeCellRender

The onBeforeCellRender event is fired before the grid cell is rendered. You can use this event to customize the appearance of JavaScript Scheduler grid cells. See also cell customization.

Declaration

DayPilot.Scheduler.onBeforeCellRender(args)

Parameters

• args.cell.displayY (number; vertical index in the grid, excludes hidden rows; read-only)

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

• args.cell.events() - returns an array of events that overlap this cell

• args.cell.grid ("top" | "main" | "bottom"; grid id; read-only)

• args.cell.isParent (boolean) - holds true for cells in parent rows (read-only)

• args.cell.properties (object with cell properties, see below)

• args.cell.resource (number | string; read-only) - resource ID

• args.cell.row (DayPilot.Row object; available since 2023.1.5516)

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

• args.cell.utilization(fieldName) - calculates utilization using the specified field of the event data object

• args.cell.x (number; horizontal position/index in the grid; read-only)

• args.cell.y (number; vertical position/index in the grid, includes hidden rows; read-only)

Properties (args.cell.properties):

• areas (array of area objects)

• backColor (string, custom cell background color, e.g. "#ccc" or "red")

• backImage (string, background image URL)

• backRepeat (string, background-repeat style)

• business (boolean, busines/non-business status)

• cssClass (string, custom cell CSS class)

• disabled (boolean, disables the cell for drag and drop)

• fontColor (string, foreground color; available since 2023.3.5631)

• html (string, custom cell raw HTML)

• text (string, custom text that will be HTML-encoded; available since 2023.3.5631)

Example

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