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

}

When loading the Calendar column data dynamically, it is also possible to use the direct API. In this case, it is necessary to remove the columns property from the config.

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

@Component({
  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config" #calendar></daypilot-calendar>`,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  @ViewChild("calendar") calendar!: DayPilotCalendarComponent;

  config: DayPilot.CalendarConfig = {
    viewType: "Resources",
  };

  ngAfterViewInit(): void {
    const columns = [{name: "Resource 1", id: "R1"}, {name: "Resource 2", id: "R2"}];
    this.calendar.control.update({columns});
  }

}

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

Setting columns directly using columns.list:

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

Setting columns using an options object of the update() method (use columns here):

const data = [
  { name: "Meeting Room A", id: "A" },
  { name: "Meeting Room B", id: "B" },
  { name: "Meeting Room C", id: "C" }
];
dp.update({columns: data});