DayPilot.Calendar.columns.list

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]

Angular

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";

@Component({
  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"}],
  };

}

React

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

render() {
  return (
    <div>
      <DayPilotCalendar
         viewType={"Resources"}
         columns={[{name: "Resource 1", id: "R1"}, {name: "Resource 2", id: "R2"}]}
      />
    </div>
  );
}

Example

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