DayPilot.Calendar.onEventFilter

The onEventFilter event handler fires for each event in the JavaScript Calendar when a filter is applied using events.filter().

By default, all events are visible. Set args.visible to false to implement custom filter rules.

Declaration

DayPilot.Calendar.onEventFilter(args)

Parameters

• args.e (DayPilot.Event) - object representing the filtered event

• args.filterParam (object) - custom filter object supplied by events.filter()

• args.visible (boolean) - determines whether the event should remain visible; the default value is true

Notes

The value of args.filterParam depends on the object passed to events.filter(), so you can use any custom filter structure that fits your application.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onEventFilter: (args) => {
    const text = ((args.filterParam && args.filterParam.text) || "").toLowerCase();
    args.visible = !text || args.e.text().toLowerCase().includes(text);
  },
  // ...
});
calendar.init();

calendar.events.filter({ text: "sales" });

Angular

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

config: DayPilot.CalendarConfig = {
  onEventFilter: (args) => {
    const text = ((args.filterParam && args.filterParam.text) || "").toLowerCase();
    args.visible = !text || args.e.text().toLowerCase().includes(text);
  },
  // ...
};

React

<DayPilotCalendar
  onEventFilter={onEventFilter}
  {/* ... */}
/>

const onEventFilter = (args) => {
  const text = ((args.filterParam && args.filterParam.text) || "").toLowerCase();
  args.visible = !text || args.e.text().toLowerCase().includes(text);
};

Vue

<DayPilotCalendar
  @eventFilter="onEventFilter"
  <!-- ... -->
/>

const onEventFilter = (args) => {
  const text = ((args.filterParam && args.filterParam.text) || "").toLowerCase();
  args.visible = !text || args.e.text().toLowerCase().includes(text);
};

See Also

Event Filtering [doc.daypilot.org]

DayPilot.Calendar.events.filter

DayPilot.Calendar Class