DayPilot.Calendar.columns

The columns property (array) defines custom calendar columns in resource calendar mode.

Since version 2018.2.3261, this legacy property is deprecated. Use DayPilot.Calendar.columns.list instead.

Declaration

DayPilot.Calendar.columns

Notes

Each column item can define:

• id (string) - resource id used to match events to the column.
• name (string) - column header text; it is also used to build the default html and toolTip values.
• start (string or DayPilot.Date) - column date; when omitted, the calendar uses DayPilot.Calendar.startDate.
• html (string) - custom HTML displayed in the column header.
• toolTip (string) - hover tooltip text for the column header.
• children (array of columns) - child columns used for hierarchical column headers.

Set viewType: "Resources" to display the custom columns. To show events in the correct column, use the same value in the event resource field as in the column id.

Examples

JavaScript

const start = DayPilot.Date.today();

const calendar = new DayPilot.Calendar("dp", {
  viewType: "Resources",
  columns: [
    { name: "Meeting Room A", id: "A", start },
    { name: "Meeting Room B", id: "B", start },
    { name: "Meeting Room C", id: "C", start }
  ],
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  viewType: "Resources",
  columns: [
    { name: "Meeting Room A", id: "A" },
    { name: "Meeting Room B", id: "B" }
  ],
  // ...
};

React

const columns = [
  { name: "Meeting Room A", id: "A" },
  { name: "Meeting Room B", id: "B" }
];

<DayPilotCalendar
  viewType="Resources"
  columns={columns}
  {/* ... */}
/>

Vue

const columns = [
  { name: "Meeting Room A", id: "A" },
  { name: "Meeting Room B", id: "B" }
];

<DayPilotCalendar
  viewType="Resources"
  :columns="columns"
  <!-- ... -->
/>

See Also

Columns [doc.daypilot.org]

Resource-Scheduling Calendar [doc.daypilot.org]

DayPilot.Calendar.columns.list

DayPilot.Date Class

DayPilot.Calendar.startDate

DayPilot.Calendar Class