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.




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

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

  • - 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)

  • (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 (

  • 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)


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