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 version, use 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

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