DayPilot.Scheduler.onBeforeCellRender

The onBeforeCellRender event handler fires before a 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) - cell end (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) - true for cells in parent rows (read-only)

• args.cell.properties (object) - cell properties (see below)

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

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

• args.cell.start (DayPilot.Date) - cell start (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):

• ariaLabel (string) - accessibility label (ARIA); available since 2026.3.6967

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

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onBeforeCellRender: (args) => {
    if (args.cell.start.getDayOfWeek() === 6) {
      args.cell.properties.backColor = "#dddddd";
    }
  },
  // ...
});
dp.init();

Angular

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

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

React

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

Vue

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

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

See Also

• Cell Customization [doc.daypilot.org]

• DayPilot.Scheduler.onAfterCellRender

• DayPilot.Scheduler Class