DayPilot.Kanban.onBeforeCardRender

The onBeforeCardRender event handler fires before a Kanban card is rendered. You can use it to customize task cards in the JavaScript Kanban component.

Declaration

DayPilot.Kanban.onBeforeCardRender(args)

Parameters

• args.data (object) - a shallow copy of the source card data object

Notes

This event is called for every card when it is loaded. You can use it to dynamically set card text, custom HTML, active areas, bar color, and other card properties before the card is displayed.

Examples

JavaScript

const kanban = new DayPilot.Kanban("dp", {
  onBeforeCardRender: (args) => {
    args.data.areas = [
      {
        right: 5,
        top: 5,
        width: 20,
        height: 20,
        symbol: "../icons/daypilot.svg#edit",
        action: "None",
        onClick: (args) => {
          const card = args.source;
          app.editCard(card);
        }
      }
    ];
  },
  // ...
});
kanban.init();

Angular

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

config: DayPilot.KanbanConfig = {
  onBeforeCardRender: (args) => {
    args.data.barColor = "#3c78d8";
  },
  // ...
};

React

<DayPilotKanban
  onBeforeCardRender={onBeforeCardRender}
  {/* ... */}
/>

const onBeforeCardRender = (args) => {
  args.data.barColor = "#3c78d8";
};

Vue

<DayPilotKanban
  @beforeCardRender="onBeforeCardRender"
  <!-- ... -->
/>

const onBeforeCardRender = (args) => {
  args.data.barColor = "#3c78d8";
};

See Also

DayPilot.Kanban.onBeforeColumnHeaderRender

DayPilot.Kanban Class