DayPilot.Navigator.onBeforeCellRender

The onBeforeCellRender event handler fires before a day cell is rendered. You can use it to customize the cell appearance.

Declaration

DayPilot.Navigator.onBeforeCellRender(args)

Parameters

• args.cell.cssClass (string) - custom CSS class (read/write)

• args.cell.day (DayPilot.Date) - cell date (read-only)

• args.cell.events.all() - returns all events that belong to this cell (available since 2025.4.6728)

• args.cell.html (string) - custom cell HTML (read/write)

• args.cell.isCurrentMonth (boolean) - true if this day belongs to the month being rendered (read-only)

• args.cell.isToday (boolean) - true if this is today and the current month (read-only)

• args.cell.isWeekend (boolean) - true if this day is a weekend day (read-only)

Notes

Available since 8.1.1853.

Examples

JavaScript

const dp = new DayPilot.Navigator("dp", {
  onBeforeCellRender: (args) => {
    if (args.cell.isCurrentMonth) {
      args.cell.cssClass = "current-month";
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.NavigatorConfig = {
  onBeforeCellRender: (args) => {
    if (args.cell.isCurrentMonth) {
      args.cell.cssClass = "current-month";
    }
  },
  // ...
};

React

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

const onBeforeCellRender = (args) => {
  if (args.cell.isCurrentMonth) {
    args.cell.cssClass = "current-month";
  }
};

Vue

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

const onBeforeCellRender = (args) => {
  if (args.cell.isCurrentMonth) {
    args.cell.cssClass = "current-month";
  }
};

See Also

Cell Customization [doc.daypilot.org]

DayPilot.Navigator Class