DayPilot.Calendar.onColumnFilter

The onColumnFilter event handler fires for each bottom-level column when a filter is applied using DayPilot.Calendar.columns.filter(param). This event is available in resource calendar mode only.

Declaration

DayPilot.Calendar.onColumnFilter(args)

Parameters

• args.visible (boolean) - sets column visibility for the current filter parameter; default is true

• args.column.id (string | number) - column id

• args.column.name (string) - column name

• args.column.start (DayPilot.Date) - column start date

• args.column.data (object) - source data item from DayPilot.Calendar.columns.list

• args.filterParam (object | string | number | null) - filter parameter passed to DayPilot.Calendar.columns.filter(param)

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  viewType: "Resources",
  onColumnFilter: args => {
    args.visible = !args.filterParam || args.column.name.includes(args.filterParam);
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  viewType: "Resources",
  onColumnFilter: args => {
    args.visible = !args.filterParam || args.column.name.includes(args.filterParam);
  },
  // ...
};

React

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

const onColumnFilter = (args) => {
  args.visible = !args.filterParam || args.column.name.includes(args.filterParam);
};

Vue

<DayPilotCalendar
  viewType="Resources"
  @columnFilter="onColumnFilter"
  <!-- ... -->
/>

const onColumnFilter = (args) => {
  args.visible = !args.filterParam || args.column.name.includes(args.filterParam);
};

See Also

Column Filtering [doc.daypilot.org]

JavaScript Resource Calendar Column Filtering [code.daypilot.org]

DayPilot.Calendar.columns.filter()

DayPilot.Calendar.columns.list

DayPilot.Calendar Class