DayPilot.Calendar.onBeforeCellRender

The onBeforeCellRender event handler fires before the JavaScript Calendar cells are rendered and lets you customize the cell content and appearance.

Declaration

DayPilot.Calendar.onBeforeCellRender(args)

Parameters

• args.cell.column (DayPilot.Column) - details for the current column (available since 2025.1.6333)

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

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

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

• args.cell.properties (object) - customizable cell properties

• args.cell.x (number) - horizontal position of the grid cell (available since 2024.2.5912)

• args.cell.y (number) - vertical position of the grid cell (available since 2024.2.5912)

Cell properties (args.cell.properties):

• areas (array of area data objects)

• business (boolean)

• cssClass (string)

• backImage (string)

• backRepeat (string)

• backColor (string)

• disabled (boolean)

• fontColor (string) - available since 2024.2.5912

• html (string)

• text (string) - available since 2024.2.5912

Notes

The args.cell.properties object is available since 2021.4.5145. In earlier versions, the same properties are available directly on args.cell instead, for example args.cell.cssClass.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeCellRender: (args) => {
    if (args.cell.start.getHours() === 13) {
      args.cell.properties.backColor = "silver";
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeCellRender: (args) => {
    if (args.cell.start.getHours() === 13) {
      args.cell.properties.backColor = "silver";
    }
  },
  // ...
};

React

<DayPilotCalendar
  onBeforeCellRender={onBeforeCellRender}
  {/* ... */}
/>

const onBeforeCellRender = (args) => {
  if (args.cell.start.getHours() === 13) {
    args.cell.properties.backColor = "silver";
  }
};

Vue

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

const onBeforeCellRender = (args) => {
  if (args.cell.start.getHours() === 13) {
    args.cell.properties.backColor = "silver";
  }
};

See Also

Cell Customization [doc.daypilot.org]

DayPilot.Calendar.onAfterCellRender

DayPilot.Calendar Class