DayPilot.Calendar.onAfterCellRender

The onAfterCellRender event handler fires after a Calendar cell has been rendered and lets you access the cell DOM element.

Available since version 2021.4.5129.

Declaration

DayPilot.Calendar.onAfterCellRender(args)

Parameters

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

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

• args.cell.resource - cell resource ID in "Resources" mode

• args.div - cell <div> element (the top-level element marked with the *_cell CSS class)

Notes

The most common use case is adding custom event handlers to the cell <div> element.

Do not modify the visible cell content using this event because that can cause performance issues. To customize the rendered cell content and appearance, use onBeforeCellRender instead.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onAfterCellRender: (args) => {
    args.div.addEventListener("dblclick", () => {
      console.log("Cell:", args.cell.start.toString());
    });
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onAfterCellRender: (args) => {
    args.div.addEventListener("dblclick", () => {
      console.log("Cell:", args.cell.start.toString());
    });
  },
  // ...
};

React

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

const onAfterCellRender = (args) => {
  args.div.addEventListener("dblclick", () => {
    console.log("Cell:", args.cell.start.toString());
  });
};

Vue

<DayPilotCalendar
  @afterCellRender="onAfterCellRender"
  <!-- ... -->
/>

const onAfterCellRender = (args) => {
  args.div.addEventListener("dblclick", () => {
    console.log("Cell:", args.cell.start.toString());
  });
};

See Also

DayPilot.Calendar.onBeforeCellRender

DayPilot.Calendar Class