The columns.list property (array) defines custom calendar columns in the resources view.

Supported in DayPilot Pro for JavaScript since version 2018.2.3261. In previous versions, use the columns property.

Item Structure

  • id (string): resource id (optional)
  • name (string): column name (the value will be HTML-encoded)
  • start (string or DayPilot.Date): column date (startDate will be used during initialization if not specified)
  • html (string): raw HTML to be displayed in the column header (optional)
  • toolTip (string): hover tooltip text (optional)
  • children (array of columns): column children when displaying column hierarchy [Pro only]
  • width (number): custom column width [Pro only]


In Angular, the columns.list value can be set using columns property of the config object:

import {Component} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`,
  styles: [``]
export class CalendarComponent {

  config: DayPilot.CalendarConfig = {
    viewType: "Resources",
    columns: [{name: "Resource 1", id: "R1"}, {name: "Resource 2", id: "R2"}],



In React, the columns.list value can be set using columns attribute of the <DayPilotCalendar> tag:

render() {
  return (
         columns={[{name: "Resource 1", id: "R1"}, {name: "Resource 2", id: "R2"}]}


dp.columns.list = [
  { name: "Meeting Room A", id: "A" },
  { name: "Meeting Room B", id: "B" },
  { name: "Meeting Room C", id: "C" }