DayPilot.Calendar.columns.list

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

Available in DayPilot Pro for JavaScript since 2018.2.3261. In earlier versions, use DayPilot.Calendar.columns.

Declaration

DayPilot.Calendar.columns.list

Notes

Each column item can define:

• id (string) - resource id used to match events to the column.
• name (string) - column header text; the value is HTML-encoded automatically.
• start (string or DayPilot.Date) - column date; when omitted, the calendar uses DayPilot.Calendar.startDate.
• html (string) - raw HTML displayed in the column header.
• toolTip (string) - hover tooltip text for the column header.
• children (array of columns) - child columns used for hierarchical headers (DayPilot Pro only).
• width (number) - fixed column width; see Custom Column Widths (DayPilot Pro only).

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. Wrapper components pass the data through the columns config/property, and direct API updates can use calendar.update({ columns }).

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  viewType: "Resources",
  // ...
});
calendar.init();

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

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

calendar.update({ columns });

Angular

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

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

React

const columns = [
  { name: "Resource 1", id: "R1" },
  { name: "Resource 2", id: "R2" }
];

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

Vue

const columns = [
  { name: "Resource 1", id: "R1" },
  { name: "Resource 2", id: "R2" }
];

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

See Also

Columns [doc.daypilot.org]

Resource-Scheduling Calendar [doc.daypilot.org]

Column Filtering [doc.daypilot.org]

Custom Column Widths [doc.daypilot.org]

DayPilot.Calendar.columns

DayPilot.Date Class

DayPilot.Calendar.startDate

DayPilot.Calendar Class