Fired before the grid cell is rendered. You can use this event to customize the cell appearance. See also cell customization [doc.daypilot.ogrg].




  • 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)
  • (object with cell properties, see below)
  • args.cell.resource (string; read-only)
  • 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)
  • html (string, custom cell HTML)


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