DayPilot.Month.onBeforeCellRender

The onBeforeCellRender event handler fires once for every cell during rendering in the monthly calendar. You can use it to customize the cell appearance.

Declaration

DayPilot.Month.onBeforeCellRender(args)

Parameters

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

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

• args.cell.events() - returns an array of overlapping DayPilot.Event objects

• args.cell.properties - object with customizable cell properties

Cell properties (args.cell.properties):

• areas (array of area objects)

• backColor (string) - custom cell background color

• backImage (string) - background image URL

• backRepeat (string) - CSS background-repeat value

• business (boolean) - business/non-business status

• cssClass (string) - custom CSS class

• disabled (boolean) - disables the cell; available since 2022.2.5287

• headerHtml (string) - custom header HTML

• headerBackColor (string) - header background color

• html (string) - custom cell HTML

Notes

The args.cell.properties object is available since 2021.4.5146. In earlier versions, the same properties were available directly on args.cell (for example args.cell.cssClass).

Examples

JavaScript

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

Angular

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

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

React

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

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

Vue

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

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

See Also

Cell Customization [doc.daypilot.org]

DayPilot.Month Class