DayPilot.Kanban.onBeforeColumnHeaderRender

The onBeforeTimeHeaderRender event fires before the JavaScript Kanban component renders a column header cell. You can use it to customize the header content.

Declaration

DayPilot.Kanban.onBeforeColumnHeaderRender(args)

Parameters

• args.column (objct) - an object with column details (args.column.data contains the source object)

• args.header.areas (array) - an array of active areas

• args.header.cssClass

• args.header.text (string) - if args.header.html is null, this text will be HTML-encoded and displayed in the header

• args.header.html (string) - overrides the default text with raw HTML (by default the value is null)

• args.header.toolTip (string)

Example

Kanban config:

{ 
  onBeforeColumnHeaderRender: (args) => {
      args.header.areas = [
          {
              right: 5,
              bottom: 5,
              width: 100,
              height: 30,
              html: "Add",
              cssClass: "add-button",
              onClick: async args => {
                  const column = args.source;
                  const modal = await DayPilot.Modal.prompt("New card name:", "Task");
                  if (modal.canceled) {
                      return;
                  }
                  dp.cards.add({id: DayPilot.guid(), name: modal.result, column: column.data.id});
              }
          }
      ]
  }
}

Related CSS:

<style>
    .add-button {
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: #eee;
        color: #666;
        text-align: center;
        line-height: 30px;
    }

    .add-button:hover {
        background-color: #ddd;
    }
</style>