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.areas (array of area objects)
  • args.cell.resource (string; read-only)
  • args.cell.start (DayPilot.Date object; read-only)
  • args.cell.end (DayPilot.Date object; 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, e.g. "#ccc" or "red")
  • (boolean, busines/non-business status)
  • args.cell.disabled (boolean, disables the cell for drag and drop)
  • args.cell.x (number; horizontal position/index in the grid )
  • args.cell.y (number; vertical position/index in the grid)
  • - returns an array of events that overlap this cell
  • args.cell.utilization(fieldName) - calculates utilization using the specified field of the event data object


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