DayPilot.Month.onEventFilter

The onEventFilter handler decides which loaded events are displayed by the JavaScript Monthly Calendar when an event filter is active.

Call events.filter() to supply the criteria. Set args.visible to false for events that do not match. Filtering changes visibility without removing events from events.list.

Available in DayPilot Pro for JavaScript, including Angular, React and Vue. TypeScript declarations are available from 2026.4.7158; JavaScript filtering was already supported in earlier versions.

Declaration

DayPilot.Month.onEventFilter(args)

Parameters

TypeScript argument type: DayPilot.MonthEventFilterArgs.

• args.e (DayPilot.Event, read-only): event being considered for display. Use args.e.text() for its text or args.e.data for application fields.
• args.filter (any, read-only): the value supplied to events.filter(). It can be a string or an object containing several criteria.
• args.visible (boolean): initially true. Set it to false to hide the event.

Behavior

The handler runs while Month prepares events for display with an active filter. It may run again when events or the displayed range change; do not rely on one invocation per loaded event.

Use events.filter(null) to clear the filter. An empty string also makes the filter inactive. With no active filter, this handler is not called. Existing event visibility settings and the displayed date range still apply.

Examples

The examples match event text without regard to case or surrounding whitespace. Add the handler to an existing Month component, keeping its other options and event data. Activate it after initialization by calling events.filter("plan") on the Month control; see events.filter() for framework control access and Clear buttons.

JavaScript

const month = new DayPilot.Month("dp", {
  onEventFilter: args => {
    const query = String(args.filter).trim().toLowerCase();
    args.visible = args.e.text().toLowerCase().includes(query);
  }
});
month.init();
month.events.filter("plan");

Angular

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

import {DayPilot} from "daypilot-pro-angular";

config: DayPilot.MonthConfig = {
  onEventFilter: args => {
    const query = String(args.filter).trim().toLowerCase();
    args.visible = args.e.text().toLowerCase().includes(query);
  }
};

React

import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

const onEventFilter = (args: DayPilot.MonthEventFilterArgs) => {
  const query = String(args.filter).trim().toLowerCase();
  args.visible = args.e.text().toLowerCase().includes(query);
};

<DayPilotMonth onEventFilter={onEventFilter} />

Vue

<script setup lang="ts">
import {DayPilot, DayPilotMonth} from "daypilot-pro-vue";

const onEventFilter = (args: DayPilot.MonthEventFilterArgs) => {
  const query = String(args.filter).trim().toLowerCase();
  args.visible = args.e.text().toLowerCase().includes(query);
};
</script>

<template>
  <DayPilotMonth :onEventFilter="onEventFilter" />
</template>

Object Criteria

Define the parameter shape together with the handler. This example combines event text with an application-specific category stored in tags:

const month = new DayPilot.Month("dp", {
  onEventFilter: args => {
    const query = args.filter.text.trim().toLowerCase();
    args.visible = args.e.text().toLowerCase().includes(query)
      && args.e.data.tags?.category === args.filter.category;
  }
});
month.init();
month.events.filter({text: "plan", category: "operations"});

See Also

• DayPilot.Month.events.filter()
• Month Event Filtering
• DayPilot.Month Class